<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>路线管理</title>
    <style>
		:root {
			/* 主色调：深蓝与冷灰（传递专业、稳重感） */
			--back_color_1: #0d2b50;  /* 深蓝主背景（如夜空）[4,7](@ref) */
			--back_color_2: #1a3658;  /* 稍浅深蓝，区块背景 */
			--back_color_3: #2a4a7c;  /* 中蓝色，按钮/突出背景 */
			--back_color_4: #3d5a9e;  /* 亮蓝色，次级强调色 */
			--back_color_5: #4a6fc8;  /* 高亮蓝，标题/重要边框[6](@ref) */

			/* Hover 配色：明度提升增强交互反馈 */
			--back_color_h_1: #152f5c;
			--back_color_h_2: #224272; 
			--back_color_h_3: #355a9a; 
			--back_color_h_4: #4a6dbb; 
			--back_color_h_5: #5b80d8; 

			/* 菜单背景：冷灰白保持干净 */
			--menu_back_color_1: #ffffff;       /* 纯白 */
			--menu_back_color_h_1: #f0f4f8;     /* 浅蓝灰 Hover[5](@ref) */
			--menu_back_color_2: #f8fafc;       /* 冷调浅灰 */
			--menu_back_color_h_2: #e6ecf2;     /* 中蓝灰 Hover */

			/* 操作色：冷色系警示（替代暖红） */
			--danger_back_color_1: #e74c3c;     /* 警示红（保留高识别度）*/
			--danger_back_color_h_1: #c0392b;   /* 深红 Hover */

			/* 空间色：冷调浅灰替代暖米白 */
			--space_color_1: #ffffff;           /* 纯白 */
			--space_color_2: #f0f4f8;           /* 浅蓝灰背景[5](@ref) */
			--space_color_3: #e3e8ee;           /* 中冷灰填充 */
			--space_color_h_2: #dce2e9;         /* 浅灰 Hover */
			--space_color_h_3: #edf1f5;         /* 更浅冷灰 Hover */

			/* 文字色：深灰蓝提升可读性 */
			--text_color_1: #ffffff;            /* 白色标题 */
			--text_color_2: #879199;             /* 浅灰蓝正文 */
			--text_color_3: #39464f;             /* 中灰蓝辅助文字[5](@ref) */

			/* 遮罩与线条：冷调半透明 */
			--mask_color_1: rgba(13, 43, 80, 0.7); /* 深蓝遮罩 */
			--mask_text_color: #ffffff; 
			--mask_color_2: rgba(240, 244, 248, 0.4); 
			--line_color_1: #e0e0e0;            /* 分隔线颜色调整为更柔和的灰色 */
			--line_color_2: #3d5a9e;             /* 亮蓝色细线 */
		}
		* {
			box-sizing: border-box;
		}
        html,body{
			margin: 0;
			padding: 0;
			display:flex;
			height: 100vh; /* 优化：使用视口高度，更适合移动端 */
			width:100%;
			flex-direction:column;
			overflow: hidden; /* 优化：防止body意外滚动 */
			font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; /* 优化：使用更现代的字体栈 */
        }
		#root,#main_div{
			position: relative;
			display:flex;
			width:100%;
			height:100%;
			margin:0;
			padding:0;
			flex-direction:column;
			z-index:1;
		}
		#container{
			margin: 0;
			padding: 0;
			display:flex;
			flex: 1;
			width:100%;
			flex-direction:column;
			overflow: hidden; /* 优化：确保内容区不会超出父容器 */
        }		
        #map_div {
			display:flex;
			height:100%;
            width: 100%;
            margin: 0;
            padding: 0;
        }
        input {
            width: 100%;
            padding: 8px;
            border: 1px solid var(--line_color_1);
			color:var(--text_color_3);
            border-radius: 4px;
        }
		.filte_checkbox{
			width:20px;
			height:20px;
            border: 1px solid var(--line_color_1);		
		}
		.filte_select{
            width: 100%;
            padding: 8px;
            border: 1px solid var(--line_color_1);
            border-radius: 4px;
			color:var(--text_color_3);
		}
        button {
            background: var(--back_color_3);
            color: white;
            border: none;
            padding: 5px;
            border-radius: 4px; /* 优化：稍大的圆角 */
            cursor: pointer;
            font-weight: bold;
            width: 100%;
			font-size:14px; /* 优化：增大字体大小 */
			transition: background-color 0.2s ease; /* 优化：增加过渡效果 */
        }
        button:hover {
            background: var(--back_color_h_3);
        }
        .click-marker {
            background: url(https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png) no-repeat;
            background-size: 30px 40px;
            width: 40px;
            height: 40px;
            position: absolute;
            transform: translate(-15px, -40px);
            pointer-events: none;
        }
        .filte_input_div {
			position: relative;
			display:flex;
			width:100%;
			flex-direction:column;
            margin:0;
        }
		.filte_checkbox_div{
			display:flex;
			width:100%;
			flex-direction:row;
			gap:10px;
			justify-content:center;
		}
		.search-container {
			width:350px;
			margin-left:auto;
		}
		.search_div{
			position: absolute;
			display:flex;
			justify-content:center;
			width:100%;
			top: 10px;
			z-index: 30;
		}
		.lay_div {
			position: absolute;
			background: rgba(255, 255, 255, 0.9);
			z-index: 30;
			border-radius: 4px;
			box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
			padding: 10px;
		}
		.lay_check{
			width: 16px;
			heigth:16px;
			margin:0;
		}
		.search-result-item {
			padding: 8px;
			border-bottom: 1px solid var(--menu_back_color_1);
			cursor: pointer;
		}
		.search-result-item:hover {
			background-color: var(--menu_back_color_h_1);
		}
		.input-card input{
			width:100%;
		}
		#myModal {
			display: none;
			position: fixed; 
			z-index: 600;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			overflow: auto;
			justify-content: center;  /* 水平居中 */
			align-items: center;      /* 垂直居中 */
			background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
		}
		#modalcontent {
			display: flex;
			width: 95%; /* 优化：响应式宽度 */
			max-width: 800px; /* 优化：保留桌面端最大宽度 */
			max-height: 90vh;
			overflow-y: auto; /* 优化：内容可滚动 */
			flex-direction: column;
			justify-content: flex-start; /* 优化：内容从顶部开始 */
			align-items: center;
			background-color: var(--space_color_2);
			color:var(--text_color_3);
			margin: auto; /* 优化：确保居中 */
			border-radius: 12px; /* 优化：更柔和的圆角 */
		}
		.close {
			color: #aaa;
			font-size: 28px;
			font-weight: bold;
			display:flex;
			margin-left:auto;
			margin-right:15px;
		}
		.close:hover,
		.close:focus {
			color: black;
			text-decoration: none;
			cursor: pointer;
		}
		#filte_div{
			display:none;
			width:100%;
			padding-left:50px;
			padding-right:50px;
			padding-bottom:50px;
			gap:10px;
			flex-direction:column;
			justify-content: center;
			align-items: center;
		}
		#table_div .input_row_div {
			flex-direction: column; /* 关键：将内部元素从水平排列改为垂直堆叠 */
			border-bottom: 1px solid var(--line_color_1); /* 在每个信息项后添加分隔线 */
			padding-bottom: 8px;
			margin-bottom: 8px;
			color:var(--text_color_2);
		}
		#table_div .input_row_div:last-child {
			border-bottom: none;
		}
		#table_div .label_cell {
			width: 100%; /* 宽度占满整行 */
			color: var(--text_color_2); /* 使用辅助文字颜色，突出数值 */
			border: none;
		}
		#table_div .input_cell {
			width: 100%; /* 宽度占满整行 */
			font-weight: 500;     /* 字体加粗，突出显示 */
			min-height: 1.2em;    /* 为空内容保留一定高度，避免布局跳动 */
			border: none;
		}
		.detail_input_div{
			padding-top: 0px;
			padding-left: 16px;
			padding-right: 16px;
			padding-bottom: 16px;
			gap: 16px;     /* 增加标题和内容之间的间距 */
			width:100%;
			height:95%;
			flex-direction:column;
			justify-content: center;
			align-items: center;			
		}
		.input_div{
			border: none;
			width:100%;
			overflow:auto;
			display:flex;
			flex-direction:column;
			flex:1;
			background:var(--space_color_2);
			color:var(--text_color_2);
		}
		.detail_table{
			border: none;
			width:100%;
			overflow:auto;
			display:flex;
			flex-direction:column;
			flex:1;
			background:var(--space_color_2);
			color:var(--text_color_2);
		}
		#detail_table_div .input_row_div {
			flex-direction: column; /* 关键：将内部元素从水平排列改为垂直堆叠 */
			border-bottom: 1px solid var(--line_color_1); /* 在每个信息项后添加分隔线 */
			padding-bottom: 8px;
			margin-bottom: 8px;
			color:var(--text_color_2);
		}
		#detail_table_div .input_row_div:last-child {
			border-bottom: none;
		}
		#detail_table_div .label_cell {
			width: 100%; /* 宽度占满整行 */
			color: var(--text_color_2); /* 使用辅助文字颜色，突出数值 */
			border: none;
		}
		#detail_table_div .input_cell {
			width: 100%; /* 宽度占满整行 */
			font-weight: 500;     /* 字体加粗，突出显示 */
			min-height: 1.2em;    /* 为空内容保留一定高度，避免布局跳动 */
			border: none;
		}
		.hide_table_div{
			width:100%;
			max-height:0;
			display:flex;
			flex-direction:column;
			background:var(--space_color_2);
			overflow:hidden;
			transition: max-height 0.2s ease-out; /* 添加过渡效果 */
		}
		.hide_table_div.expanded{
			max-height:500px;
		}
		.hide_table_content{
			display:flex;
			width:100%;
			flex-shrink: 0;
			flex-direction:row;
			pointer-events: auto;
			background:var(--space_color_2);
			flex:1;
			border-top: 1px solid var(--line_color_2); /* 优化：增加分割线 */		
		
		}
		.hide_table_title{
			display:flex;
			width:100%;
			flex-direction:row;
			background:var(--space_color_2);
			justify-content:center;
			align-items:center;
			padding: 0 10px;
		}
		#table1_div{
			background:var(--space_color_2);
			width:100%;
			display:flex;
			flex-direction:column;
			overflow:auto;
		}	
		.row-check,#all_check,.part_check{
			width: 16px;
			height: 16px;
		}
		#line_table_div{
			bottom: 0;
			display:flex;
			width:100%;
			padding:0px;
			flex-direction:column;
			background:var(--space_color_2);
		}
		.line_table_child{
			display:none;
			width:100%;
			height:300px;
			padding:0px;
			flex-direction:column;
			background:var(--space_color_2);
		}
		.line_table_child.display{
			display:flex;
		}		
		.dropdown{
			position: absolute;
			display:none;
			top: 100%; /* 顶部对齐父容器的底部 */
			left: 0;   /* 左侧对齐父容器的左侧 */
			flex-direction: column;
			border-radius: 5px; /* 边框圆角 */
			border: 1px solid var(--line_color_1); /* 边框颜色和粗细 */
			background-color: white;
			max-height:0;
			width:290px;
			transition: max-height 0.2s ease-out; /* 添加过渡效果 */
			z-index:300;
			overflow:hidden;
		}
		#item_div,.dropdown_item_div{
			flex:1;
			overflow-y: auto;
		}
		.dropdown-item:hover {
			background-color: #efeff4; /* 悬停时的背景色 */
		}
		.dropdown-item {
			padding: 5px;
			cursor: pointer;
		}
		.dropdown.expanded {
			display:flex;
			max-height:300px;
		}
		.seach_div{
			display:flex;
			justify-content: center;
			align-items: center;
			padding:2px 5px;
			color:var(--text_color_1);
			background:var(--back_color_3);
		}	
		.seach_div:hover{
			background: var(--back_color_h_3); /* 悬停时的背景色 */
			cursor: pointer; /* 鼠标悬停时显示手型指针 */
		}
		#search_page{
			display:flex;
			width:100%;
			justify-content: center;
			border-top:1px solid var(--line_color_1);
			background:var(--back_color_3);
		}
		#page_info{
			display:flex;
			width:70px;
			justify-content: center;
			align-items: center;
			padding:2px 5px;
			background:var(--back_color_3);
			color:var(--text_color_1);
		}
		#page_info:hover{
			background:var(--back_color_h_3); /* 悬停时的背景色 */
			cursor: pointer; /* 鼠标悬停时显示手型指针 */
		}
		.checkbox_div{
			display:flex;
			flex-direction:row;
		}
		#road_info {
			display:flex;
			flex-direction:column;
			width:100%;
			overflow:auto;
			padding: 10px;
			gap:5px;
			margin:0;
			color:var(--text_color_3);
		}
		.road_info_cell{
			margin-left:5px;
		}
		.danger_button{
			background:var(--danger_back_color_1);
		}
		.danger_button:hover{
			background:var(--danger_back_color_h_1)
		}
		#edit_div{
			display:none;
			width:100%;
			margin:0;padding:0;
			flex-direction:column;
			gap:5px;
			padding:10px;
			background:var(--menu_back_color_2);
			color:var(--text_color_3);
		}
		#modal_table_div{
			display:flex;
			width:100%;
			flex:1;
			overflow:auto;
		}
		.input_table_div{
			display:none;
			width:100%;
			flex:1;
			flex-direction:column;
			justify-content: center;
			align-items: center;
			overflow:auto;
		}
		.input_table{
			width:100%;
			border-collapse: collapse;
			background:var(--space_color_2);
			color:var(--text_color_2);
			border:1px solid var(--line_color_1);
		}
		.label_cell{
			width:20%;
			padding: 8px;
			border: 1px solid var(--line_color_1);
			color:var(--text_color_3);
		}
		.input_cell{
			width:30%;
			padding: 8px;
			border: 1px solid var(--line_color_1);
			color:var(--text_color_3);
			flex:1;
		}
		.input_row_div{
			border-collapse: collapse;
			display:flex;
			flex-direction:row;
			width:100%;
		}
		#get_distance_button.select{
			background:var(--back_color_h_2);
			color:var(--text_color_2);
		}
		#get_pile_button.select{
			background:var(--back_color_h_2);
			color:var(--text_color_2);
		}
		.export_checkbox{
			width:20px;
			height:20px;
			border: 1px solid var(--line_color_1);
			margin:0;
		}
		.export_row_div{
			border-collapse: collapse;
			display:flex;
			flex-direction:row;
			width:100%;	
		}
		#get_map_color_menu_div{
			border-collapse: collapse;
			display:flex;
			flex-direction:column;
			width:100%;
		}
		.get_map_row_div{
			border-collapse: collapse;
			display:flex;
			flex-direction:row;
			width:100%;	
		}
		.get_map_menu_input_cell{
			flex:1;
			border-radius: 0;
			padding: 8px;
			border: 1px solid var(--line_color_1);
			color:var(--text_color_3);
			cursor: text;
		}
		.alert_info_div{
			position: absolute;
			display:flex;
			background:none;
			z-index: 35;
			width:100%;
			flex-direction:column;
			justify-content: center;
			align-items: center;
			pointer-events: none;
			top:20px;
			gap:10px;
		}
		.alert_info,.filte_info{
			background: rgba(255, 255, 255, 0.9);
			z-index: 35;
			border-radius: 4px;
			box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
			padding: 10px 15px;
			font-size: 24px;
			color:var(--text_color_3);
		}
		#win_modal {
			display:none;
			position: fixed; 
			z-index: 700;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			overflow: auto;
			justify-content: center;  /* 水平居中 */
			align-items: center;      /* 垂直居中 */
			background-color: rgba(0,0,0,0.4); /* 优化：增加透明度 */
			gap:10px;
		}
		#alert_div,#prompt_div,#confirm_div,#key_setting_div{
			display:none;
			border-radius: 8px;
			min-width: 300px;
			width: 85vw; /* 优化：响应式宽度 */
			max-width: 450px; /* 优化：桌面端最大宽度 */
			min-height: 150px;
			flex-direction:column;
			justify-content: center;
			align-items: center;
			background-color: var(--space_color_2);
			color:var(--text_color_3);
		}
		.win_main_div{
			display:flex;
			flex:1;
			justify-content: center;
			align-items:center;
			flex-direction:column;
			padding:30px;
			width:100%;
		}	
		.win_text_div{
			display:flex;
			width:100%;
			justify-content: center;
			align-items: center;
			color:var(--text_color_3);
		}
		.win_button_div{
			display:flex;
			width:100%;
			bottom:0;
			padding:0;
			justify-content: center;
			align-items: center;		
		}
		#edit_table_button_div button{
			width:auto;
		}
		.table_card{
			display:flex;
			flex-direction:column;
			background: white;
			border-radius: 12px;
			box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
			padding:0;
			margin-bottom: 16px;
			overflow: hidden;
			transition: all 0.3s ease;
		}
		.card_header{
			padding: 8px 12px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1px solid #f0f0f0;	
		}
		.table_card:hover{
			transform: translateY(-2px); /* 优化：增加悬浮效果 */
			box-shadow: 0 4px 16px rgba(0,0,0,0.12); /* 优化：增加悬浮阴影 */
			cursor: pointer;
		}
		.table_info_div{
			display:flex;
			flex-direction:row;
		}	
		.table_cell{
			display: flex;
			margin-bottom: 12px;
			align-items: flex-start;
		}
		.select_td{
			display:flex;
			margin-left:auto;
		}
		.card_title {
			font-size: 1.1rem;
			font-weight: 600;
			color: #2c3e50;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			min-width: 0; 
			flex-shrink: 1;
			flex:1;
		}
		.card_road_part_id_div{
			font-size: 0.85rem;
			color: #7f8c8d;
			background: #f0f2f5;
			padding: 4px 8px;
			border-radius: 4px;
		}
		.card_label_cell{
			min-width: 70px;
			font-size: 0.9rem;
			color: #7f8c8d;
			flex-shrink: 0;	
		}
		.card_value_cell{
			flex: 1;
			font-size: 0.95rem;
			color: #2c3e50;
			font-weight: 500;	
		}
		.card_conetent{
			display:flex;
			width:100%;
			flex-direction:column;
			padding: 8px 12px;
			gap:4px;
		}
		.card_footer{
			padding: 8px 12px;
			background: #f8f9fa;
			display: flex;
			justify-content: space-between;
			font-size: 0.85rem;
			color: #7f8c8d;	
		}
		#topbar{
			display:flex;
			width:100%;
			padding: 8px;
			background-color: var(--back_color_1);
			box-shadow: 0 2px 5px rgba(0,0,0,0.2);
			align-items: center;
			gap: 8px;
			flex-shrink: 0;
		}
		#bottom_div{
			height:auto;
			width:100%;
			display:flex;
			flex-direction:row;
			background: var(--menu_back_color_2);
			padding: 0;
			border-top: 1px solid var(--line_color_1);
			flex-shrink: 0;
		}
		.bottom_button_span {
			background: var(--menu_back_color_2);
			flex: 1;
			display:flex;
			justify-content:center;
			align-items:center;
			padding: 8px 4px; /* 优化：增大点击区域 */
			color:white;
			user-select: none;
		}
       .bottom_button_span:hover {
             background: var(--space_color_h_1);
        }
		#menuspan:hover {
			background-color: var(--back_color_h_4);
		}
        #menuspan {
			display:flex;
			background-color: var(--back_color_4);
			padding:5px;
			color: #fff;
			width: 40px; /* 优化：固定尺寸 */
			height: 40px; /* 优化：固定尺寸 */
			text-align: center;
			align-items: center;
			justify-content: center;
        }
		.menu {
			position: absolute;
			display:flex;
			width:0;
			height:100%;
			margin:0px;
			background-color: var(--menu_back_color_2);
			transition: width 0.1s ease-out;
			border: 0;
			flex-direction:column;
			z-index:800;
			overflow:hidden;
		}
        .menu.expanded {
			width: 200px;
			box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
        }
		.menu_li{
			display:flex;
			gap:10px;
			width:100%;
			margin:10px 0px;
			height:30px;
			background: none;
			border: none;
			color: var(--text_color_2); /* 文字颜色 */	
			font-size: inherit;
			flex-direction:row;
			overflow:hidden;
			white-space: nowrap;
		}
		.menu_li_bottom{
			display:flex;
			gap:10px;
			width:100%;
			margin-left:10px;
			margin-right:10px;
			margin-bottom:10px;
			margin-top:auto;
			height:30px;
			background: none;
			border: none;
			color: var(--text_color_2); /* 文字颜色 */	
			font-size: inherit;
			flex-direction:row;
			overflow:hidden;
			white-space: nowrap;
		}
		ul {
			width:100%;
			height:100%;
			list-style-type: none;
			margin: 0;
			padding: 0;
		}
		#line_table_title_div{
			display:flex;
			flex-direction:row;
			margin-left:auto;
			gap:2px;
			width: 100%;
			max-width: 500px;
			margin: 0 auto;
		}
		/* 新增：标签页按钮样式 */
		.tab-button {
			padding: 12px 16px;
			cursor: pointer;
			position: relative;
			color: var(--text_color_2);
			transition: color 0.3s ease;
			font-size: 1rem;
			text-align: center;
			flex: 1;
		}
		.tab-button::after {
			content: '';
			position: absolute;
			bottom: 0;
			left: 50%;
			transform: translateX(-50%);
			width: 0;
			height: 3px;
			background-color: var(--back_color_5);
			transition: width 0.3s ease;
		}
		.tab-button.active {
			color: var(--back_color_5);
			font-weight: 600;
		}
		.tab-button.active::after {
			width: 60%;
		}
		#outdiv {
			flex: 1;
			position:relative;
			height:100%;
			width:100%;
			padding:0;
			margin:0;
			flex-direction:column;
			display:flex;
		}
		#display_div {
			position:relative;
			display:flex;
			flex-direction:column;
			width:100%;
			height:100%;
			padding:0;
			margin:0;
			flex:1;
		}
		#indexdiv {
			display:flex;
			flex:1;
			width:100%;
			margin:0px;
			position: relative;
			flex-direction:row;
			overflow: hidden;
		}
    </style>
</head>
<body>
	<div id ='root'>
		<div id = 'win_modal'>
			<div id = 'key_setting_div'>
				<div class = 'win_main_div'>
					<h3>请设置相关参数</h3>
					<label for= "aip_key_input" style = 'margin-right:auto;'>高德服务API Key</label>
					<input id = 'aip_key_input' style = 'width:100%;' value = ''></input>
					<label for= "aip_safe_key_input" style = 'margin-right:auto;'>高德服务安全 Key</label>
					<input id = 'aip_safe_key_input' style = 'width:100%;' value = ''></input>
					<label for = 'adcode_input' style = 'margin-right:auto;'>地区代号</label>
					<input id = 'adcode_input' placeholder="例如：110000" value = ''></input>
					<label for = 'adcode_lng_input' style = 'margin-right:auto;' >初始经度</label>
					<input type = 'number' id = 'adcode_lng_input'  placeholder="例如：116.397428" value = ''></input>
					<label for = 'adcode_lat_input' style = 'margin-right:auto;' >初始纬度</label>
					<input type = 'number' id = 'adcode_lat_input'  placeholder="例如：39.90923" value = ''></input>					
				</div>
				<div class = 'win_button_div' id = 'key_setting_button_div'>
					<button id = 'key_setting_confirm_button' style = 'border-radius: 0 0 0 8px;height:48px;' >确定</button>
					<button id = 'key_setting_cance_button' class = 'danger_button' style = 'border-radius: 0 0 8px 0;height:48px;'>取消</button>
				</div>
			</div>		
			<div id = 'alert_div'>
				<div class = 'win_main_div'>
					<span id = 'alert_text_div' class = 'win_text_div'></span>
				</div>
				<div class = 'win_button_div' >
					<button id = 'alert_confirm_button' style = 'border-radius: 0 0 8px 8px;height:48px;'>确定</button>
				</div>
			</div>
			<div id = 'prompt_div'>
				<div class = 'win_main_div'>
					<span id = 'prompt_text_div' class = 'win_text_div'></span>
					<input id = 'prompt_input' style = 'width:100%;'></input>
				</div>
				<div class = 'win_button_div' >
					<button id = 'prompt_confirm_button' style = 'border-radius: 0 0 0 8px;height:48px;'>确定</button>
					<button id = 'prompt_cance_button' class = 'danger_button' style = 'border-radius: 0 0 8px 0;height:48px;'>取消</button>
				</div>
			</div>
			<div id = 'confirm_div'>
				<div class = 'win_main_div'>
					<span id = 'confirm_text_div' class = 'win_text_div'></span>
				</div>
				<div class = 'win_button_div' >
					<button id = 'confirm_confirm_button' style = 'border-radius: 0 0 0 8px;height:48px;'>确定</button>
					<button id = 'confirm_cance_button' class = 'danger_button' style = 'border-radius: 0 0 8px 0;height:48px;'>取消</button>
				</div>
			</div>
		</div>
		<div id = 'main_div'>
			<div id="myModal" class="modal">
				<div id = 'modalcontent'>
					<span style='width:100%;display:flex;padding:0;margin:0;'>
						<span id = "close_icon" class="close">
							&times;	
						</span>
					</span>
					<div id = 'modal_table_div'>
						<div id = 'table_div' class = 'input_table_div'>
							<h2>编辑路线信息</h2>
							<div id = 'road_info_table' class = 'detail_table' style = 'padding:16px;'>
								<div class ='input_row_div'>
									<div class = 'label_cell'>路线识别码</div>
									<input class = 'input_cell' id = 'road_id_input'  placeholder="例如:R1"></input>			
									<div class = 'label_cell'>路段编号</div>
									<input type ='number' class = 'input_cell' id = 'road_part_id_input'  placeholder="例如:1"></input>
								</div>
								<div class ='input_row_div'>
									<div class = 'label_cell'>行政区划名称</div>
									<input class = 'input_cell' id = 'road_ad_name_input' placeholder="例如:义乌市"></input>
									<div class = 'label_cell'>行政区划代号</div>
									<input class = 'input_cell' id = 'road_ad_code_input' placeholder="例如:330782"></input>
								</div>							
								<div class ='input_row_div'>
									<div class = 'label_cell'>
										路线名称
									</div>
									<input class = 'input_cell' id = 'road_name_input' ></input>
									<div class = 'label_cell'>是否启用</div>
									<select class = 'input_cell' id = 'is_work_input'>
										<option value = '是' selected>是</option>
										<option value = '否'>否</option>
									</select>
								</div>
								<div class ='input_row_div'>
									<div class = 'label_cell'>路线编号</div>
									<input class = 'input_cell' id = 'road_country_id_input' ></input>
									<div class = 'label_cell'>方向</div>								
									<select class = 'input_cell' id = 'direction_input'>
										<option value = '双向' selected>双向</option>
										<option value = '上行'>上行</option>
										<option value = '下行'>下行</option>
									</select>								
								</div>
								<div class ='input_row_div'>
									<div class = 'label_cell'>技术等级</div>
									<select class = 'input_cell' id = 'road_lv_input'>
										<option value = '暂无' selected>暂无</option>
										<option value = '一级'>一级</option>
										<option value = '二级'>二级</option>
										<option value = '三级'>三级</option>
										<option value = '四级'>四级</option>	
									</select>
									<div class = 'label_cell'>行政等级</div>
									<select class = 'input_cell' id = 'road_class_input'>
										<option value ='国道'>国道</option>
										<option value ='省道'>省道</option>
										<option value ='县道' selected>县道</option>	
									</select>								
								</div>
								<div class ='input_row_div'>
									<div class = 'label_cell'>路段长度</div>
									<input type = 'number' class = 'input_cell' id = 'road_long_input' placeholder="单位:m"></input>
									<div class = 'label_cell'>路面宽度</div>
									<input type = 'number' class = 'input_cell' id = 'road_face_width_input' placeholder="单位:m"></input>
								</div>
								<div class ='input_row_div'>
									<div class = 'label_cell'>路基宽度</div>
									<input type = 'number' class = 'input_cell' id = 'road_base_width_input' placeholder="单位:m"></input>								
									<div class = 'label_cell'>路面面积</div>
									<input type = 'number' class = 'input_cell' id = 'road_face_area_input' placeholder="单位:m²"></input>
								</div>
								<div class ='input_row_div'>
									<div class = 'label_cell'>面层厚度</div>
									<input type = 'number' class = 'input_cell' id = 'road_face_thickness_input' placeholder="单位:m"></input>
									<div class = 'label_cell'>设计时速</div>
									<input type = 'number' class = 'input_cell' id = 'road_speed_input' placeholder="单位:km/h"></input>									
								</div>
								<div class ='input_row_div'>
									<div class = 'label_cell'>车道数量</div>
									<input type = 'number' class = 'input_cell' id = 'road_lane_count_input' ></input>
									<div class = 'label_cell'>路面类型</div>
									<input class = 'input_cell' id = 'road_face_type_input' ></input>									
								</div>
								<div class ='input_row_div'>
									<div class = 'label_cell'>巡查部门</div>
									<input class = 'input_cell' id = 'respon_department_input' ></input>
									<div class = 'label_cell'>保洁部门</div>
									<input class = 'input_cell' id = 'clean_department_input' ></input>										
								</div>
								<div class ='input_row_div'>													
									<div class = 'label_cell'>修理部门</div>
									<input class = 'input_cell' id = 'fix_department_input' ></input>
									<div class = 'label_cell'>养护单位</div>
									<input class = 'input_cell' id = 'road_unit_input' ></input>
								</div>
								<div class ='input_row_div'>
									<div class = 'label_cell'>开始桩号</div>
									<input type ='number' class = 'input_cell' id = 'start_pile_input' placeholder="单位:m"></input>							
									<div class = 'label_cell'>结束桩号</div>
									<input type ='number' class = 'input_cell' id = 'end_pile_input' placeholder="单位:m"></input>							
								</div>
								<div class ='input_row_div'>
									<div class = 'label_cell'>建成时间</div>
									<input type ='number' class = 'input_cell' id = 'road_build_time_input' ></input>
									<div class = 'label_cell'>最近检修时间</div>
									<input type ='number' class = 'input_cell' id = 'road_fix_time_input' ></input>
								</div>							
								<div class ='input_row_div'>
									<div class = 'label_cell'>描述</div>
									<input input = 'input_cell' id = 'road_desc_input' class = 'input_cell' style="flex:1"></input>
								</div>
							</div>
							<div style="display:flex;width:100%;height:48px;flex-direction:row;justify-content:center;align-items: center;gap:0;padding:0;margin-top:auto;">
									<button id="confirmButton" style = 'height:100%;border-radius: 0 0 0 8px;'>确定</button>	
									<button id="canceButton" class = 'danger_button' style = 'height:100%;border-radius: 0 0 8px 0;'>取消</button>	
							</div>					
						</div>
						<div id = 'filte_div' class = 'input_table_div'>
							<h2  style = 'margin:0;'>筛选表格</h2>
							<div class = 'input_div'>
								<div id = 'filte_road_id_div' class = 'filte_input_div'>
									<label for="filte_road_id_input">路线识别码：</label>
									<input type="text" id="filte_road_id_input" class = 'filte_input'></input>
								</div>							
								<div id = 'filte_is_work_div' class = 'filte_input_div'>
									<label for="filte_is_work_input">是否启用：</label>
									<select type="text" id="filte_is_work_input" class = 'filte_select' value = '是'>
										<option value="">无</option>	
										<option value="是" selected>是</option>							
										<option value="否">否</option>
									</select>
								</div>
								<div id = 'filte_road_name_div' class = 'filte_input_div'>
									<label for="filte_road_name_input">路线名称：</label>
									<input type="text" id="filte_road_name_input" class = 'filte_input'></input>
								</div>
								<div id = 'filte_road_country_id_div' class = 'filte_input_div'>
									<label for="filte_road_country_id_input">路线编号：</label>
									<input type="text" id="filte_road_country_id_input" class = 'filte_input'></input>
								</div>
								<div id = 'filte_road_unit_div' class = 'filte_input_div'>
									<label for="filte_road_unit_input">养护单位：</label>
									<input type="text" id="filte_road_unit_input" class = 'filte_input'></input>
								</div>								
								<div id = 'filte_road_lv_div' class = 'filte_input_div'>
									<label for="filte_road_lv_input">技术等级：</label>
									<select id="filte_road_lv_input" class = 'filte_select'>
										<option value="" selected>无</option>
										<option value='暂无'>暂无</option>
										<option value='一级'>一级</option>
										<option value="二级">二级</option>
										<option value="三级">三级</option>
										<option value="四级">四级</option>
									</select>									
								</div>
								<div id = 'filte_direction_div' class = 'filte_input_div'>
									<label for="filte_direction_input">方向：</label>
									<select id="filte_direction_input" class = 'filte_select' value="">
										<option value="" selected>无</option>
										<option value = '双向'>双向</option>
										<option value="下行">下行</option>							
										<option value="上行">上行</option>
									</select>
								</div>							
								<div>行政等级:</div>
								<div id = 'filte_road_class_div' class = 'filte_checkbox_div' >
									<div class = 'checkbox_div'>
										<label for="filte_road_class_1" >国道:</label>
										<input type="checkbox" id="filte_road_class_1" class = 'filte_checkbox' data-value = '国道'></input>
									</div>
									<div class = 'checkbox_div'>
										<label for="filte_road_class_2" >省道:</label>
										<input type="checkbox" id="filte_road_class_2" class = 'filte_checkbox' data-value = '省道'></input>
									</div>
									<div class = 'checkbox_div'>
										<label for="filte_road_class_3" >县道:</label>
										<input type="checkbox" id="filte_road_class_3" class = 'filte_checkbox' data-value = '县道'></input>
									</div>
								</div>
								<div id = 'filte_respon_department_div' class = 'filte_input_div'>
									<label for="filte_respon_department_input">巡查部门：</label>
									<input type="text" id="filte_respon_department_input" class = 'filte_input'></input>
								</div>
								<div id = 'filte_clean_department_div' class = 'filte_input_div'>
									<label for="filte_clean_department_input">保洁部门：</label>
									<input type="text" id="filte_clean_department_input" class = 'filte_input'></input>
								</div>
								<div id = 'filte_fix_department_div' class = 'filte_input_div'>
									<label for="filte_fix_department_input">维修部门：</label>
									<input type="text" id="filte_fix_department_input" class = 'filte_input'></input>
								</div>
							</div>
							<div style="display:flex;width:300px;flex-direction:row;justify-content:center;align-items: center;gap:10px;">
									<button id="filte_confirmButton">确定</button>	
									<button id="filte_canceButton" class = 'danger_button'>取消</button>
							</div>					
						</div>
						<div id='detail_table_div' class='input_table_div'>
							<h2 style = 'margin:0;'>详细信息</h2>
							<div class='detail_table'>
								<div class = 'detail_input_div'>
									<div class='input_row_div'>
									  <div class='label_cell'>路段识别码</div>
									  <div class='input_cell' id='road_part_id_detail_page'></div>
									  <div class='label_cell'>路线识别码</div>
									  <div class='input_cell' id='road_id_detail_page'></div>
									</div>
									<div class='input_row_div'>
									  <div class='label_cell'>是否启用</div>
									  <div class='input_cell' id='is_work_detail_page'></div>
									  <div class='label_cell'>路线名称</div>
									  <div class='input_cell' id='road_name_detail_page'></div>
									</div>
									<div class='input_row_div'>
									  <div class='label_cell'>路线编号</div>
									  <div class='input_cell' id='road_country_id_detail_page'></div>
									  <div class='label_cell'>行政等级</div>
									  <div class='input_cell' id='road_class_detail_page'></div>
									</div>
									<div class ='input_row_div'>
										<div class = 'label_cell'>行政区划名称</div>
										<div class = 'input_cell' id = 'road_ad_name_detail_page'></div>
										<div class = 'label_cell'>行政区划代号</div>
										<div class = 'input_cell' id = 'road_ad_code_detail_page'></div>
									</div>						
									<div class='input_row_div'>
									  <div class='label_cell'>方向</div>
									  <div class='input_cell' id='direction_detail_page'></div>	
									  <div class='label_cell'>技术等级</div>
									  <div class='input_cell' id='road_lv_detail_page'></div>
									</div>
									<div class='input_row_div'>
									  <div class='label_cell'>开始桩号</div>
									  <div class='input_cell' id='start_pile_detail_page'></div>
									  <div class='label_cell'>结束桩号</div>
									  <div class='input_cell' id='end_pile_detail_page'></div>							  
									</div>
									<div class='input_row_div'>
									  <div class='label_cell'>实际里程</div>
									  <div class='input_cell' id='distance_detail_page'></div>						
									  <div class='label_cell'>路段长度</div>
									  <div class='input_cell' id='road_long_detail_page'></div>
									</div>
									<div class='input_row_div'>
									  <div class='label_cell'>路面宽度</div>
									  <div class='input_cell' id='road_face_width_detail_page'></div>
									  <div class='label_cell'>路面面积</div>
									  <div class='input_cell' id='road_face_area_detail_page'></div>
									</div>
									<div class='input_row_div'>
									  <div class='label_cell'>路基宽度</div>
									  <div class='input_cell' id='road_base_width_detail_page'></div>							
									  <div class='label_cell'>面层厚度</div>
									  <div class='input_cell' id='road_face_thickness_detail_page'></div>
									</div>						
									<div class='input_row_div'>
									  <div class='label_cell'>设计时速</div>
									  <div class='input_cell' id='road_speed_detail_page'></div>							
									  <div class='label_cell'>车道数量</div>
									  <div class='input_cell' id='road_lane_count_detail_page'></div>
									</div>
									<div class='input_row_div'>
									  <div class='label_cell'>路面类型</div>
									  <div class='input_cell' id='road_face_type_detail_page'></div>							
									  <div class='label_cell'>巡查部门</div>
									  <div class='input_cell' id='respon_department_detail_page'></div>		
									</div>
									<div class='input_row_div'>						
									  <div class='label_cell'>保洁部门</div>
									  <div class='input_cell' id='clean_department_detail_page'></div>
									  <div class='label_cell'>修理部门</div>
									  <div class='input_cell' id='fix_department_detail_page'></div>
									</div>
									<div class='input_row_div'>
									  <div class='label_cell'>养护单位</div>
									  <div class='input_cell' id='road_unit_detail_page'></div>
									  <div class='label_cell'>坐标类型</div>
									  <div class='input_cell' id='coord_type_detail_page'></div>								  
									</div>							
									<div class='input_row_div'>
									  <div class='label_cell'>建成时间</div>
									  <div class='input_cell' id='road_build_time_detail_page'></div>							
									  <div class='label_cell'>最近检修时间</div>
									  <div class='input_cell' id='road_fix_time_detail_page'></div>
									</div>						
									<div class='input_row_div'>
									  <div class='label_cell'>开始</div>
									  <div class='input_cell' id='start_pos_detail_page'></div>							
									  <div class='label_cell'>结束</div>
									  <div class='input_cell' id='end_pos_detail_page'></div>
									</div>
									<div class='input_row_div'>
									  <div class='label_cell'>描述</div>
									  <div class='input_cell' id='road_desc_detail_page'></div>
									</div>
								</div>								
							</div>
						</div>
						<div id='export_table_div' class='input_table_div'>
							<h2>导出设置</h2>
							<div class='input_table'>
								<div class = 'export_row_div'>
									<div class='label_cell'>导出格式</div>
									<select id = 'export_type' class ='input_cell'>
										<option value = 'GEOJSON' selected>GEOJSON</option>	
										<option value = 'GEOJSONGPS'>GEOJSON大地坐标系</option>									
									</select>
								</div>
							</div>	
							<div style="display:flex;width:100%;flex-direction:row;justify-content:center;align-items: center;gap:10px;margin-top:16px;">
								<button id="export_confirmButton" style = 'width:100%;padding:10px;'>导出</button>	
							</div>						
						</div>
					</div>
				</div>
			</div>		
			<div id="container">
				<div id = 'topbar'>
					<span id="menuspan" >
						<img src="dir/img/icon/menu_icon.svg" id = 'menu_icon'  style="width: 20px;pointer-events: none;">
					</span>
					<div class="search-container">
						<div style ='width:100%;display:flex;flex-direction:column;position:relative'>
							<div style ='width:100%;display:flex;flex-direction:row;gap:2px;'>
								<input type="text" style = 'width:70%' id="search_input" placeholder="请输入地址...">
								<button id ='search_button' style = 'width:15%;'>搜索</button>
								<button id ='search_clear_button' class = 'danger_button' style = 'width:15%;'>清除</button>
							</div>
							<div id="search_result_div" class = 'dropdown' >					
								<div id = 'item_div'>
								</div>
								<div id = 'search_page'>
									<div id = 'back_page' class = 'seach_div' style = 'margin-right:auto;'>上一页</div>
											 <div id = 'page_info' >
												<div id="page_index_div"></div>
												<div>/</div>
												<div id = "total_page_div"></div>
											 </div>
									<div id = 'forward_page' class = 'seach_div' style = 'margin-left:auto;'>下一页</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div id = 'indexdiv'>
					<div id="menu" class = 'menu'>
						<input type="file" id="file_input" multiple accept=".geojson" style='display:none';>
						<span style="height:100px;margin:0;padding:0;width:100%;display:flex;text-align: center;align-items: center;justify-content: center;color:white;font-size: 32;"></span>
						<span id = 'key_manage_button' class = 'menu_li'><img src="dir/img/icon/key_icon.svg" style="pointer-events: none;margin-left:10px;">
							<div class ="menutextdiv">秘钥管理</div>
						</span>
						<span id = 'load_line_button' class = 'menu_li'><img src="dir/img/icon/upload_icon.svg" style="pointer-events: none;margin-left:10px;">
							<div class ="menutextdiv">导入数据</div>
						</span>
						<span id = 'export_line_button' class = 'menu_li'><img src="dir/img/icon/export_icon.svg" style="pointer-events: none;margin-left:10px;">
							<div class ="menutextdiv">导出数据</div>
						</span>
						<span id = 'hide_line_button' class = 'menu_li'><img src="dir/img/icon/hide_icon.svg" style="pointer-events: none;margin-left:10px;">
							<div class ="menutextdiv">隐藏选中路段</div>
						</span>	
						<span id = 'display_line_button' class = 'menu_li'><img src="dir/img/icon/display_icon.svg" style="pointer-events: none;margin-left:10px;">
							<div class ="menutextdiv">显示选中路段</div>
						</span>
						<span id = 'delete_line_button' class = 'menu_li'><img src="dir/img/icon/delete_icon.svg" style="pointer-events: none;margin-left:10px;">
							<div class ="menutextdiv">删除选中路段</div>
						</span>
					</div>
					<div id = 'outdiv'>
						<div id = 'display_div'>
							<div id = 'map_div'>
								<div id = 'prompt_info_div' class = 'alert_info_div'>
								</div>				
								<div class="lay_div" style = "bottom:20px;left:10px;">
									<div style ='width:100%;display:flex;flex-direction:column;gap:5px;'>
										<div style ='width:100%;display:flex;flex-direction:row;gap:5px;'>
											<input type="checkbox" id="basic_lay_check" class='lay_check' checked>
											<label for="basic_lay_check">基础图层</label>
										</div>
										<div style ='width:100%;display:flex;flex-direction:row;gap:5px;'>
											<input type="checkbox" id="photo_lay_check" class='lay_check' >
											<label for="photo_lay_check">卫星图层</label>
										</div>					
										<div style ='width:100%;display:flex;flex-direction:row;gap:5px;'>
											<input type="checkbox" id="road_lay_check" class='lay_check' checked>
											<label for="road_lay_check">路网图层</label>
										</div>					
										<div style ='width:100%;display:flex;flex-direction:row;gap:5px;'>
											<input type="checkbox" id="city_part_lay_check" class='lay_check' checked>
											<label for="city_part_lay_check">行政图层</label>
										</div>
									</div>
								</div>
							</div>							
						</div>
						<div id = 'hide_table_div' class = 'hide_table_div expanded'>
							<div id = 'hide_table_title' class = 'hide_table_title'>
								<div id = 'line_table_title_div'>
									<div id= 'basic_road_info_button' class="tab-button">基础信息</div>
									<div id= 'line_table_button' class="tab-button active">路线列表</div>
								</div>
							</div>						
							<div class = 'hide_table_content'>
								<div class = 'line_table_child' id = 'road_info_mode'>
									<div id = 'road_info_button_div' style = 'width:100%;display:flex;justify-content:center;gap:1px;padding:10px 10px 0px 10px;'>
										<button id = 'detail_page_button'>详细信息</button>
										<button id = 'edit_line_button'>编辑信息</button>
									</div>								
									<div id ="road_info">
									</div>											
								</div>
								<div class = 'line_table_child display' id = 'table1_mode'>
									<div id = 'table1thead' style = 'padding:0;width:100%;display:flex;flex-direction:row;'>							
										<div style='height:100%;display:flex;padding:10px;margin-left:auto;'>
											<label>全选</label>
											<input type = 'checkbox' id = 'all_check' ></input>
										</div>
									</div>
									<div id = 'table1_div'>	
											<div id = 'table1body' style ='display:flex;width:100%;flex:1;flex-direction:column;gap:5px;padding:10px;'>
											</div>
									</div>
								</div>
							</div>
						</div>							
					</div>				
				</div>
				<div id = 'bottom_div'>
					<span id = 'filte_button' class = 'bottom_button_span'>
						<img src="dir/img/icon/add_data_icon.svg" style="pointer-events: none;">
					</span>
					<span id = 'get_pile_button' class = 'bottom_button_span'>
						<img src="dir/img/icon/pil_icon.svg" style="pointer-events: none;">					
					</span>
					<span id = 'click_guide_button' class = 'bottom_button_span'>
						<img src="dir/img/icon/address_icon.svg" style="pointer-events: none;">	
					</span>					
					<span id = 'hide_select_line_button' class = 'bottom_button_span'>
						<img id = 'hide_select_line_button_img' src="dir/img/icon/hide_line_text_icon.svg" style="pointer-events: none;">	
					</span>
					<span id = 'hide_table_button' class = 'bottom_button_span' data-state ='隐藏菜单'>
						<img id = 'hide_table_button_img' src="dir/img/icon/hide_menu_icon.svg" style="pointer-events: none;">
					</span>					
				</div>
			</div>
		</div>
	</div>
	<script src = "coordtransform.js"></script>
	<script>
		//----------状态相关参数START----------
		let state = {
			is_pile_mode:false
		};
		//----------地图参数START----------
		let line_map = new Map(); //存储路段和其相关信息的映射		
		let gaode ={
			basic_line_color:"#0091ff", //路段颜色
			select_line_color:"#FF4500",//选中路段颜色
			drog_line_color:'#1CAB2D',
			basic_line_width:6,
			basic_line_alpha:1
		}
		let map = null;		
		let mouseTool = null;
		let placeSearch = null;
		let click_icon = null;//点击图标
		let select_line_id = ""//选择的线的id(通过地图的选择)
	</script>
	<script src = 'road_manage_db.js'></script>
	<script>
		async function Android_download(url, fileName, parentpath, datatype) {
			return new Promise((resolve, reject) => {
				// 定义成功回调函数
				window.onDownloadComplete = function() {
					resolve(); // 解析 Promise，表示下载完成
				};
				// 定义失败回调函数
				window.onDownloadError = function(errorMessage) {
					reject(errorMessage); // 拒绝 Promise，并传递错误信息
				};
				// 调用原生方法
				window.Android.downloadFile(url, fileName, parentpath, datatype);
			});
		}	
		async function blobToBase64(blob) {
			return new Promise((resolve, reject) => {
				const reader = new FileReader();
				// 读取完成时的回调函数
				reader.onloadend = () => {
					// reader.result 是 Base64 格式的字符串，去掉前缀部分（如 "data:image/png;base64,"）
					resolve(reader.result.split(',')[1]);
				};
				// 读取 Blob 数据
				reader.onerror = reject;
				reader.readAsDataURL(blob);
			});
		}	
	</script>	
	<script>
		let open_menu_set = new Set();
		let ui_menu_set = new Set();
		let win_set = new Set(); //用于存放打开窗口的set
		let select_set = new Set(); //选择的路段id的集合（表格选择）
		function close_opening_menu(set){
			 for (let dom of set) {
				dom.classList.remove('expanded'); // 移除展开样式
			}
			set.clear(); // 清空记录
		}
		function delete_opening_menu(set) {
			 for (let dom of set) {
				dom.remove(); // 移除展开样式
			}
			set.clear(); // 清空记录
		}
		function expand_menu(dom,set){
			let old_size = set.size
			set.add(dom)
			let new_size = set.size
			if(old_size<new_size){
				dom.classList.add('expanded');
			}
		}
		function modal_work(mode,id){
			let modal_table_div = document.getElementById('modal_table_div');
			let div_arr = modal_table_div.querySelectorAll('.input_table_div');
			let myModal = document.getElementById('myModal');
			if(mode){
				for(let div of div_arr){
					div.style.display = 'none';	
				}
				let target_div = document.getElementById(id);
				target_div.style.display = 'flex';
				myModal.style.display = 'flex';
			}else{
				myModal.style.display = 'none';
				for(let div of div_arr){
					div.style.display = 'none';	
				}
			}
		}
		function clear_input_cell(){
			let input_cell_arr = road_info_table.querySelectorAll('.input_cell');
			for(let input_cell of input_cell_arr){
				let key = input_cell.id.substring(0, input_cell.id.length - 6);
				if(road_data[key]){
					let value = road_data[key].read_default;
					road_data[key].input.write(key,value);
					
				}
			}
		}
		function clear_detail_cell(){
			let cell_arr = document.getElementById('detail_table_div').querySelectorAll('.input_cell');
			for(let cell of cell_arr){
				cell.textContent = "";
			}
		}
		function click_filte_input(key){ //获取下拉菜单
			if(!road_data[key].filte||!road_data[key].filte.dropdown){
				return;
			}
			let filte_arr = road_data[key].filte.dropdown(key);
			let item_div = document.getElementById('filte_'+key+'_item_div')
			if(!item_div){
				return;
			}
			item_div.innerHTML = '';
			if(filte_arr.length === 0){
				return;
			};
			for(let element of filte_arr){
				let optionElement = document.createElement('div');
				optionElement.textContent = element;
				optionElement.dataset.value = element;
				optionElement.classList.add('dropdown-item');
				item_div.appendChild(optionElement)
			}
			let dropdown_menu = document.getElementById('filte_'+key+'_dropdown')
			expand_menu(dropdown_menu,open_menu_set)
		}

		function alert_fix(content){
			return new Promise((resolve)=>{
				let win_modal = document.getElementById('win_modal');
				let alert_div = document.getElementById('alert_div')
				let alert_text_div = document.getElementById('alert_text_div')
				alert_text_div.textContent = content;
				alert_div.style.display = 'flex';
				win_modal.style.display = 'flex';
				win_set.add('alert');
				function alert_confirm(event){
					if(event.target.closest('#alert_confirm_button')){
						alert_text_div.textContent = "";
						alert_div.style.display = "none"
						win_set.delete('alert');
						if(win_set.size === 0){
							win_modal.style.display = 'none';
						}
						alert_div.removeEventListener('click', alert_confirm);
						resolve()
					}
				}
				alert_div.addEventListener('click',alert_confirm)
			})
		}
		function confirm_fix(content){
			return new Promise((resolve)=>{
				let win_modal = document.getElementById('win_modal');
				let confirm_text_div = document.getElementById('confirm_text_div')		
				let confirm_div = document.getElementById('confirm_div')
				confirm_text_div.textContent = content;
				confirm_div.style.display = 'flex';
				win_modal.style.display = 'flex';
				win_set.add('confirm')
				function confirm_confirm(event){
					if(event.target.closest('#confirm_confirm_button')){
						confirm_text_div.textContent = "";
						confirm_div.style.display = "none"
						win_set.delete('confirm')
						if(win_set.size === 0){
							win_modal.style.display = 'none';
						}
						confirm_div.removeEventListener('click', confirm_confirm);
						resolve(true)
					}else if(event.target.closest('#confirm_cance_button')){
						confirm_text_div.textContent = "";
						confirm_div.style.display = "none"
						win_set.delete('confirm');
						if(win_set.size === 0){
							win_modal.style.display = 'none';
						}
						confirm_div.removeEventListener('click', confirm_confirm);
						resolve(false)
					}
				}
				confirm_div.addEventListener('click',confirm_confirm)
			})
		}
		function prompt_fix(content){
			return new Promise((resolve)=>{
				let win_modal = document.getElementById('win_modal');
				let prompt_text_div = document.getElementById('prompt_text_div')	
				let prompt_div = document.getElementById('prompt_div')
				prompt_text_div.textContent = content;
				prompt_div.style.display = 'flex';
				win_modal.style.display = 'flex';
				win_set.add('prompt')
				function prompt_confirm(event){
					if(event.target.closest('#prompt_confirm_button')){
						prompt_text_div.textContent = "";
						prompt_div.style.display = "none"
						win_set.delete('prompt')
						if(win_set.size === 0){
							win_modal.style.display = 'none';
						}
						prompt_div.removeEventListener('click', prompt_confirm);
						resolve(document.getElementById('prompt_input').value)
					}else if(event.target.closest('#prompt_cance_button')){
						prompt_text_div.textContent = "";
						prompt_div.style.display = "none"
						win_set.delete('prompt');
						if(win_set.size === 0){
							win_modal.style.display = 'none';
						}
						prompt_div.removeEventListener('click', prompt_confirm);
						resolve(null)
					}
				}
				prompt_div.addEventListener('click',prompt_confirm)
			})
		}
		function updata_table(map){ //更新表格内容（因为路线管理普遍在百条以内，所以没必要做优化，直接清空表格重新加载即可）
			let all_check = document.getElementById('all_check');
			let table1body = document.getElementById('table1body');				
			select_set.clear();
			table1body.innerHTML = "";
			all_check.checked = false;
			table1_div.scrollTo({ top:0});
			let temp_div = document.createDocumentFragment();
			let line_obj_arr = Array.from(map.values());
			function sort_filte(obj1,obj2){
				for(let element of check_filte_arr){
					if(element){
						let key = element['key']
						if(obj1[key]!=obj2[key]){
							let sort = element['way']
							let result = sort(key,obj1,obj2)
							return result;
						}
					}
				}
				return 0;
			}
			line_obj_arr.sort(sort_filte);
			for(let [key,value] of line_map){
				if(value.line){
					value.line.hide()
				}
				if(value.start_mark){
					value.start_mark.hide()
				}
				if(value.end_mark){
					value.end_mark.hide();
				}					
			}
			for(let line_obj of line_obj_arr){
				const table_card = document.createElement('div');
				table_card.dataset.id = line_obj.road_part_id;
				let line = line_obj.line;
				if(line){
					if(line_obj.display){
						line.show();
						if(line_obj.start_mark){
							line_obj.start_mark.show();
						}
						if(line_obj.end_mark){
							line_obj.end_mark.show();
						}
					}else{
						line.hide();
						if(line_obj.start_mark){
							line_obj.start_mark.hide();
						}
						if(line_obj.end_mark){
							line_obj.end_mark.hide();
						}					
					
					}
				}
				table_card.className = 'table_card';
				let card_header = document.createElement('div');
				card_header.className = 'card_header';	
				let card_title = document.createElement('div');
				card_title.className = 'card_title';
				let title = road_data['road_country_id'].display_str('road_country_id',line_obj);
				if(title&&title!=='暂无'){
					title = title+'-'+road_data['road_name'].display_str('road_name',line_obj);
				}else{
					title = road_data['road_name'].display_str('road_name',line_obj);
				
				}
				card_title.textContent = title;
				card_header.appendChild(card_title);
				
				let card_road_part_id_div = document.createElement('div');
				card_road_part_id_div.className = 'card_road_part_id_div';
				card_road_part_id_div.textContent = "ID:"+road_data['road_part_id'].display_str('road_part_id',line_obj);
				card_header.appendChild(card_road_part_id_div)
				table_card.appendChild(card_header);
				let card_conetent = document.createElement('div');
				card_conetent.className = 'card_conetent';
				for(let key of table_key_arr){
					if(key !== 'road_part_id'){
						let table_info_div = document.createElement('div');
						table_info_div.className = 'table_info_div';				
						let td = document.createElement('div');
						td.classname = 'table_cell';
						let label_cell = document.createElement('div');
						label_cell.className = 'card_label_cell';
						let value_cell = document.createElement('div');
						value_cell.className = 'card_value_cell';
						if(road_data[key].name){
							label_cell.textContent = road_data[key].name+':';
						}
						if(road_data[key].display_str){
							let  display_str= road_data[key].display_str(key,line_obj);
							value_cell.textContent = display_str
						}
						table_info_div.appendChild(label_cell)
						table_info_div.appendChild(value_cell)
						card_conetent.appendChild(table_info_div);					
					
					}
				}
				table_card.appendChild(card_conetent);
				let check_td = document.createElement('div');
				check_td.className = 'select_td'			
				let check_box = document.createElement('input');
				check_box.type ="checkbox"
				check_box.className = "row-check"
				check_td.appendChild(check_box);
				let card_footer = document.createElement('div');
				card_footer.className = 'card_footer';
				card_footer.appendChild(check_td);
				table_card.appendChild(card_footer)
				temp_div.appendChild(table_card);
			}		
			table1body.appendChild(temp_div);
		}
		function create_all_check_cell(){
			const div = document.createElement('div');
			div.style.display = 'flex';
			div.style.flexDirection = 'row';
			div.style.justifyContent = 'center';
			div.style.alignItems = 'center';
			div.style.marginLeft = 'auto';
			const label = document.createElement('label');
			label.htmlFor = 'all_check';
			label.textContent = '全选';
			const checkbox = document.createElement('input');
			checkbox.type = 'checkbox';
			checkbox.id = 'all_check';
			checkbox.value = 'allselect';
			div.appendChild(label);
			div.appendChild(checkbox);
			return div;
		}
		function get_seach_menu(key_word,page){ //搜索函数
			placeSearch.clear();
			if(key_word){
				placeSearch.setPageIndex(page);
				placeSearch.search(key_word, function (status, result) {
				   if(status === 'complete'){
						let page_index_div = document.getElementById('page_index_div');	
						let total_page_div = document.getElementById('total_page_div');
						let item_div = document.getElementById('item_div');
						let totalPages = Math.ceil(result.poiList.count / result.poiList.pageSize)||1;
						page_index_div.textContent = String(result.poiList.pageIndex);
						total_page_div.textContent = String(totalPages);
						let seach_result_arr = result.poiList.pois;
						item_div.innerHTML = '';
						item_div.scrollTo({ top:0});
						for(let info of seach_result_arr){
							let optionElement = document.createElement('div');
								optionElement.textContent = info.name;
							let location = info.location;
								optionElement.dataset.location = location.lng+','+location.lat;
								optionElement.classList.add('dropdown-item');
								item_div.appendChild(optionElement);
						}
						document.getElementById('search_result_div').classList.add('expanded');
				   }
				})
			}	
		}
		function creat_alert_info(content){
			let span = document.createElement('span');
			span.className = 'alert_info';
			span.textContent = content;
			document.getElementById('prompt_info_div').appendChild(span);
		}
		function delete_alert_info(){
			let result_arr = document.getElementById('prompt_info_div').querySelectorAll('.alert_info');
			if(result_arr){
				for(let span of result_arr){
					if(span){
						span.remove()
					}
				}
			}
		}
		async function creat_auto_destroy_info(content,ms){
			function delay(ms) {
				return new Promise(resolve => setTimeout(resolve, ms));
			}
			let span = document.createElement('span');
			span.className = 'filte_info';
			span.textContent = content;
			document.getElementById('prompt_info_div').appendChild(span);
			await delay(ms);
			if(span){
				span.remove();
			}
		}
		function open_key_save_win(mode){
			if(mode){
				let basic_info = check_local_storage();
				let api_key = basic_info.api_key
				let safe_key = basic_info.safe_key
				let adcode = basic_info.adcode
				let adcode_lng = basic_info.adcode_lng
				let adcode_lat = basic_info.adcode_lat
				document.getElementById('aip_key_input').value = api_key||"";
				document.getElementById('aip_safe_key_input').value = safe_key||"";
				document.getElementById('adcode_input').value = adcode||"";
				document.getElementById('adcode_lng_input').value = adcode_lng;
				document.getElementById('adcode_lat_input').value = adcode_lat;
			}
			return new Promise((resolve)=>{
				document.getElementById('key_setting_div').style.display = 'flex';
				document.getElementById('win_modal').style.display = 'flex';
				win_set.add('key_save');
				function key_save_confirm(event){
					if(event.target.closest('#key_setting_confirm_button')){
						document.getElementById('key_setting_button_div').removeEventListener('click', key_save_confirm);
						let basic_info_obj =save_key_and_adcode()
						close_key_save_win()
						resolve(basic_info_obj)
					}else if(event.target.closest('#key_setting_cance_button')){
						document.getElementById('key_setting_button_div').removeEventListener('click', key_save_confirm);
						close_key_save_win()
						resolve(null)
					}
				}
				document.getElementById('key_setting_button_div').addEventListener('click',key_save_confirm)
			})
		}
		function close_key_save_win(){
			document.getElementById('key_setting_div').style.display = 'none';
			win_set.delete('key_save');
			if(win_set.size === 0){
				document.getElementById('win_modal').style.display = 'none';
			}
		}
	</script>
	<script>
		let road_data = {
			road_id:{
				name:'路线识别码',
				type:'string', //数据格式
				read_default:null,//默认值
				input:{type:'input',//信息编辑页面，需同步更新编辑页面输入框，且id和class必须符合规律
					read:get_input_value,//信息编辑页面对应字段的读取信息的函数
					write:set_input_value//信息编辑页面对应字段的写入信息的函数
				},
				
				filte:{type:'input',//筛选页面，需同步更新筛选页面输入框，且id和class必须符合规律
					read:get_filte_text,//筛选页面对应字段的读取信息的函数
					write:set_filte_text,//筛选页面页面对应字段的写入信息的函数
					dropdown:null,//筛选页面页面对应字段下拉框数据获取函数，null为无下拉框。
					check:filte_road_id_input //检测算法						
				},
				table:{
					index:null,
					sort:{index:0,way:number_compare}//表格的排序优先级和排序算法
				},
				display_str:get_display_value,//表格的以及dom的显示逻辑
				info_display:null,//是否在显示框显示诗句
				is_export:true,//导出时是否携带此字段
				export_data:export_data,//写入导出对象的函数
				load_read:get_load_read//导入时候的读取对象对应字段的函数
			},
			road_part_id:{
				name:'路段识别码',
				type:'string',
				read_default:null,
				input:{type:'input',
					read:get_road_id_input_value,
					write:set_road_id_input_value
				},
				table:{
					index:0,
					sort:{index:1,way:road_part_id_compare}
				},
				display_str:get_display_value,
				info_display:{index:0},
				is_export:true,
				export_data:export_data,
				load_read:get_load_read
			},
			is_work:{
				name:'是否启用',
				type:'string',
				read_default:'是',
				input:{type:'select',				
					read:get_input_value,
					write:set_select_value
				},
				
				filte:{type:'select',
					read:get_filte_text,
					write:set_filte_text,
					dropdown:null,
					check:filte_input
				},
				display_str:get_display_value,
				info_display:null,
				is_export:true,
				export_data:export_data,
				load_read:get_load_read
			},
			road_name:{
				name:'路线名称',
				type:'string',
				read_default:null,
				input:{type:'input',				
					read:get_input_value,
					write:set_input_value
				},
				filte:{type:'select',
					read:get_filte_text,
					write:set_filte_text,
					dropdown:null,
					check:filte_input
				},				
				table:{
					index:null,
					sort:{index:5,way:str_compare}//表格的排序优先级和排序算法
				},				
				display_str:get_display_value,
				info_display:{index:1},
				is_export:true,
				export_data:export_data,
				load_read:get_load_read
			},			
			road_country_id:{
				name:'路线编号',
				type:'string',
				read_default:null,
				input:{type:'input',				
					read:get_input_value,
					write:set_input_value,
				},
				filte:{type:'input',
					read:get_filte_text,
					write:set_filte_text,
					dropdown:null,
					check:filte_input
				},
				table:{
					index:null,
					sort:null
				},
				display_str:get_display_value,
				info_display:{index:2},
				is_export:true,
				export_data:export_data,
				load_read:get_load_read
			},
			road_class:{
				name:'行政等级',
				type:'string',
				read_default:'县道',	
				input:{type:'slect',			
					read:get_input_value,
					write:set_input_value,
				},
				filte:{type:'checkbox',
					read:null,
					write:null,
					dropdown:null,
					check:filte_checkbox
				},
				table:{
					index:7,
					sort:null
				},
				display_str:get_display_value,
				info_display:{index:3},
				is_export:true,
				export_data:export_data,
				load_read:get_load_read
			},
			road_lv:{
				name:'技术等级',
				type:'string',
				read_default:null,				
				input:{type:'select',
					read:get_input_value,
					write:set_select_value
				},
				filte:{type:'select',
					read:get_filte_text,
					write:set_filte_text,
					dropdown:get_filte_arr,
					check:filte_input
				},
				display_str:get_display_value,
				info_display:{index:4},
				is_export:true,
				export_data:export_data,
				load_read:get_load_read
			},
			respon_department:{
				name:'巡查部门',
				type:'string',
				read_default:null,			
				input:{type:'input',				
					read:get_input_value,
					write:set_input_value
				},					
				filte:{type:'input',
					read:get_filte_text,
					write:set_filte_text,
					dropdown:get_filte_arr,
					check:filte_input
				},
				table:{
					sort:{index:4,way:str_compare}
				},
				display_str:get_display_value,
				info_display:{index:5},
				is_export:true,
				export_data:export_data,
				load_read:get_load_read
			},
			clean_department:{
				name:'保洁部门',
				type:'string',
				read_default:null,
				input:{type:'input',
					read:get_input_value,
					write:set_input_value
				},
				filte:{type:'input',
					read:get_filte_text,
					write:set_filte_text,
					dropdown:get_filte_arr,
					check:filte_input
				},
				display_str:get_display_value,
				info_display:{index:6},
				is_export:true,
				export_data:export_data,
				load_read:get_load_read
			},
			fix_department:{
				name:'修理部门',
				type:'string',
				read_default:null,			
				input:{type:'input',				
					read:get_input_value,
					write:set_input_value
				},				
				filte:{type:'input',
					read:get_filte_text,
					write:set_filte_text,
					dropdown:get_filte_arr,
					check:filte_input
				},
				display_str:get_display_value,
				info_display:{index:7},
				is_export:true,
				export_data:export_data,
				load_read:get_load_read
			},
			road_unit:{
				name:'养护单位',
				type:'string',
				read_default:null,			
				input:{type:'input',				
					read:get_input_value,
					write:set_input_value
				},				
				filte:{type:'input',
					read:get_filte_text,
					write:set_filte_text,
					dropdown:get_filte_arr,
					check:filte_input
				},
				display_str:get_display_value,
				info_display:{index:8},
				is_export:true,
				export_data:export_data,
				load_read:get_load_read
			},
			direction:{
				name:'方向',
				type:'string',
				read_default:'双向',			
				input:{type:'select',				
					read:get_input_value,
					write:set_select_value
				},				
				filte:{type:'select',
					read:get_filte_text,
					write:set_filte_text,
					dropdown:null,
					check:filte_input
				},
				table:{
					index:2,
					sort:{index:3,way:str_compare}
				},
				display_str:get_display_value,
				info_display:{index:9},
				is_export:true,
				export_data:export_data,
				load_read:get_load_read
			},
			start_pile:{
				name:'开始桩号',
				type:'number',
				read_default:null,				
				input:{type:'input',			
					read:get_input_value_as_number,
					write:set_input_value
				},
				table:{	
					index:8,
					sort:{index:2,way:number_compare}
				},
				display_str:get_display_pile,
				info_display:{index:10},
				is_export:true,
				export_data:export_data,
				load_read:get_load_read
			},
			end_pile:{
				name:'结束桩号',
				type:'number',
				read_default:null,			
				input:{type:'input',				
					read:get_input_value_as_number,
					write:set_input_value,
				},
				table:{
					index:9,
					sort:null
				},
				display_str:get_display_pile,
				info_display:{index:11},
				is_export:true,
				export_data:export_data,
				load_read:get_load_read
			},
			road_ad_name:{
				name:'行政区划名称',
				type:'string',
				read_default:null,
				input:{type:'input',				
					read:get_input_value,
					write:set_input_value
				},			
				display_str:get_display_value,
				is_export:true,
				export_data:export_data,
				load_read:get_load_read
			},			
			road_ad_code:{
				name:'行政区划代号',
				type:'string',
				read_default:null,
				input:{type:'input',				
					read:get_input_value,
					write:set_input_value
				},			
				display_str:get_display_value,
				is_export:true,
				export_data:export_data,
				load_read:get_load_read
			},
			road_face_type:{
				name:'路面类型',
				type:'string',
				read_default:null,
				input:{type:'input',				
					read:get_input_value,
					write:set_input_value
				},				
				display_str:get_display_value,
				is_export:true,
				export_data:export_data,
				load_read:get_load_read
			},
			road_build_time:{
				name:'建成时间',
				type:'number',
				read_default:null,				
				input:{type:'input',				
					read:get_input_value_as_number,
					write:set_input_value
				},				
				display_str:get_display_value,
				is_export:true,
				export_data:export_data,
				load_read:get_load_read
			},
			road_fix_time:{
				name:'最近检修时间',
				type:'number',
				read_default:null,				
				input:{type:'input',				
					read:get_input_value_as_number,
					write:set_input_value
				},				
				display_str:get_display_value,
				is_export:true,
				export_data:export_data,
				load_read:get_load_read
			},
			road_long:{
				name:'路段长度',
				type:'number',
				read_default:null,	
				input:{type:'input',			
					read:get_input_value_as_number,
					write:set_input_value
				},
				display_str:get_display_distance,
				is_export:true,
				export_data:export_data,
				load_read:get_load_read
			},
			road_face_width:{
				name:'路面宽度',
				type:'number',
				read_default:null,	
				input:{type:'input',			
					read:get_input_value_as_number,
					write:set_input_value
				},
				display_str:get_display_distance,
				is_export:true,
				export_data:export_data,
				load_read:get_load_read
			},
			road_base_width:{
				name:'路基宽度',
				type:'number',
				read_default:null,	
				input:{type:'input',			
					read:get_input_value_as_number,
					write:set_input_value
				},
				display_str:get_display_distance,
				is_export:true,
				export_data:export_data,
				load_read:get_load_read
			},
			road_face_thickness:{
				name:'面层厚度',
				type:'number',
				read_default:null,	
				input:{type:'input',			
					read:get_input_value_as_number,
					write:set_input_value
				},
				display_str:get_display_distance,
				is_export:true,
				export_data:export_data,
				load_read:get_load_read
			},
			road_speed:{
				name:'设计时速',
				type:'number',
				read_default:null,	
				input:{type:'input',			
					read:get_input_value_as_number,
					write:set_input_value
				},
				display_str:get_display_speed,
				is_export:true,
				export_data:export_data,
				load_read:get_load_read
			},
			road_lane_count:{
				name:'车道数量',
				type:'number',
				read_default:null,	
				input:{type:'input',			
					read:get_input_value_as_number,
					write:set_input_value
				},
				display_str:get_display_value,
				is_export:true,
				export_data:export_data,
				load_read:get_load_read
			},
			road_face_area:{
				name:'路面面积',
				type:'number',
				read_default:null,	
				input:{type:'input',			
					read:get_input_value_as_number,
					write:set_input_value
				},
				display_str:get_display_area,
				is_export:true,
				export_data:export_data,
				load_read:get_load_read
			},				
			distance:{
				name:'实际里程',
				type:'number',
				read_default:null,	
				input:{type:null,			
					read:null,
					write:null,
				},
				display_str:get_display_distance,
				info_display:{index:12},
				is_export:true,
				export_data:export_data,
				load_read:get_load_read
			},	
			start_pos:{
				name:'开始',
				type:'array',
				read_default:null,			
				input:{type:null,			
					read:null,
					write:null,
				},
				display_str:get_display_pos_value,
				info_display:{index:13},
				is_export:false,
				export_data:null,
				load_read:get_start_pos_read
			},
			end_pos:{
				name:'结束',
				type:'array',
				read_default:null,			
				input:{type:null,				
					read:null,
					write:null,
				},
				display_str:get_display_pos_value,
				info_display:{index:14},
				is_export:false,
				export_data:null,
				load_read:get_end_pos_read
			},
			coord_type:{
				name:'坐标类型',
				type:'string',
				read_default:null,
				is_export:true,
				display_str:get_display_value,
				info_display:{index:15},
				table:{
					sort:null
				},				
				export_data:export_data,
				load_read:get_load_read
			},			
			road_desc:{
				name:'描述',
				type:'string',
				read_default:null,			
				input:{type:'input',				
					read:get_input_value,
					write:set_input_value,
				},
				table:{
					index:10,
					sort:null
				},
				display_str:get_display_value,
				info_display:{index:16},
				is_export:true,
				export_data:export_data,
				load_read:get_load_read
			},			
			path_point:{
				name:'路径点',
				type:'array',
				read_default:[],
				display_str:null,
				info_display:null,
				is_export:true,
				export_data:export_path_point,
				load_read:get_path_point_read
			},
			check_point:{
				name:'检查点',
				type:'array',
				read_default:[],
				display_str:null,
				info_display:null,
				is_export:true,
				export_data:export_data,
				load_read:get_load_read
			},
			route:{
				name:'导航信息',
				read_default:null,			
				type:'object',
				display_str:null,
				info_display:null,
				is_export:false,
				export_data:export_data,
				load_read:get_load_read
			},
			display:{
				name:'显示',
				type:'Boolean',
				read_default:true,	
				is_export:false,
				load_read:get_load_read
			}		
		}
		//----------数据相关参数END----------	
		function get_input_value(key){
			let key_id = key+'_input'
			let dom = document.getElementById(key_id)
			if(dom){
				if(dom.value===""||dom.value===undefined||dom.value===null||dom.value==='暂无'){
					return null;
				}else{
					return dom.value;
				}
			}else{
				return null;
			}
		}
		function get_road_id_input_value(key){
			let direction = document.getElementById('direction_input').value
			let direction_id = 't'
			if(direction === '上行'){
				direction_id = 'u'
			}else if(direction === '下行'){
				direction_id = 'd'
			}
			let road_part_id = document.getElementById('road_id_input').value+'-'+document.getElementById('road_part_id_input').value+'-'+direction_id
			return road_part_id;
		}
		function get_input_value_as_number(key){
			let key_id = key+'_input'
			let dom = document.getElementById(key_id)
			if(dom){
				if(dom.value === ""){
					return null;
				}
				let result = Number(dom.value);
				if(!result&&result!== 0){
					return null;
				}else{
					return result;
				}
			}else{
				return null;
			}
		}
		function set_input_value(key,value){
			let key_id = key+'_input'
			let dom = document.getElementById(key_id)
			if(dom){
				if(value === null||value === undefined){
					dom.value = "";
				}
				dom.value = value;
			}
		}
		function set_select_value(key,value){
			let key_id = key+'_input'
			let dom = document.getElementById(key_id)
			if(dom){
				if(value === null||value === undefined){
					dom.value = "暂无";
				}
				dom.value = value;
			}
		}		
		function set_input_value_as_number(key,value){
			let key_id = key+'_input'
			let dom = document.getElementById(key_id)
			if(dom){
				if(value === null||value === undefined){
					dom.value = "";
				}
				dom.value = value;
			}
		}		
		function set_road_id_input_value(key,value){
			let dom = document.getElementById('road_part_id_input');
			if(dom){
				if(value||value === ""){
					let arr =value.split('-');
					if(arr.length ===3){
						dom.value = arr[1];
					}else{
						dom.value = "";
					}
				}else{
					dom.value = "";
				}
			}
		};
		function get_display_value(key,obj){
			let str = "";
			if(obj[key] === undefined ||obj[key] ==null){
				str = '暂无';
			}else{
				str = obj[key]
			};
			return str;
		}
		function get_display_pos_value(key,obj){
			let str = "";
			if(obj[key] === undefined ||obj[key] ==null){
				str = '暂无';
			}else{
				let str_arr = obj[key]
				let lng = Number(str_arr[0]).toFixed(6)
				let lat = Number(str_arr[1]).toFixed(6)
				str = lng+','+lat
			};
			return str;
		}		
		function get_display_distance(key,obj){
			let str = "";
			if(obj[key] === undefined ||obj[key] ==null){
				str = '暂无';
			}else{
				str = String(obj[key])+'m';
			};
			return str;
		}
		function get_display_speed(key,obj){
			let str = "";
			if(obj[key] === undefined ||obj[key] ==null){
				str = '暂无';
			}else{
				str = String(obj[key])+'km/h';
			};
			return str;
		}
		function get_display_area(key,obj){
			let str = ""
			if(obj[key] === undefined ||obj[key] ==null){
				str = '暂无';
			}else{
				str = String(obj[key])+'m²';
			};
			return str;		
		}
		function get_display_pile(key,obj){
			let number = obj[key]
			let str = get_pile_by_number(number)
			if(str === null){
				str = '暂无'
			}
			return str;
		}
		function get_pile_by_number(pile){
			if(pile!==undefined &&pile !== null){
				let pile_number = Number(pile);
				pile_number = pile_number.toFixed(5);
				let pile_str = String(pile_number)
				let pile_str_arr = pile_str.split('.')
				let pile_part = pile_str_arr[1]||"0";
				let str = 'K'+pile_str_arr[0]+'+'+String((Number(pile_part)/100));
				return str;
			}else{
				return '暂无';
			}
		}
		function export_data(key,value,obj){
			obj.properties[key] = value;
		}
		function export_path_point(key,value,obj){
			obj.geometry.coordinates = value;
		}
		function get_load_read(key,obj,i){
			let value = obj?.features[i]?.properties[key]
			if(value === undefined){
				value = road_data[key].read_default
			}
			if(value === '暂无'||value === ''){
				value = null;
			};
			return value;
		}
		function get_start_pos_read(key,obj,i){
			let pos = null;
			let value = obj?.features[i]?.geometry?.coordinates
			if(value){
				pos = value[0]
			}
			return pos;		
		}
		function get_end_pos_read(key,obj,i){
			let pos = null;
			let value = obj?.features[i]?.geometry?.coordinates;
			if(value){
				pos = value[value.length-1]
			}
			return pos;		
		}
		function get_path_point_read(key,obj,i){
			let value = obj?.features[i]?.geometry?.coordinates
			if(value){
				return value;
			}else{
				return road_data[key].read_default;
			}
		}
		function number_compare(key,obj1,obj2){
			let str1 = "";
			let str2 = "";
			if(obj1[key]||obj1[key] === 0){
				str1 = obj1[key].replace(/\D/g, '');
			}
			if(obj2[key]||obj2[key] === 0){
				str2 = obj2[key].replace(/\D/g, '');	
			}
			let number_a = Number(str1)||0;
			let number_b = Number(str2)||0;
			return number_a - number_b;
		}
		function str_compare(key,obj1,obj2){
			return obj1[key].localeCompare(obj2[key]);
		}
		function road_part_id_compare(key,a,b){
			let a_road_part_id = a.road_part_id
			let b_road_part_id = b.road_part_id
			let a_part_id_arr = a_road_part_id.split('-')
			let a_part_id = a_part_id_arr[1]
			let b_part_id_arr = b_road_part_id.split('-')
			let b_part_id = b_part_id_arr[1]
			let number_a = Number(a_part_id)||0;
			let number_b = Number(b_part_id)||0;
			return number_a - number_b;
		}
		function get_filte_text(key){
			let key_id = 'filte_'+key+'_input'
			let dom = document.getElementById(key_id);
			if(dom){
				if(dom.value === '暂无'){
					return null;
				}else{
					return dom.value;
				}
			}
		}
		function set_filte_text(key,value){
			let key_id = 'filte_'+key+'_input'
			let dom = document.getElementById(key_id);
			if(dom){
				if(value == undefined ||value == null){
					value = "";
				}
				dom.value = value;
			}
		}
		function filte_input(key,data,input_value){
			if(data[key] != input_value){
				return false;
			}
			return true;
		}
		function filte_road_id_input(key,data,input_value){  //筛选函数
			if(input_value){
				let road_part_id = data['road_part_id'];
				let check_value = input_value+'-';
				if(!(road_part_id+'-').startsWith(check_value)){
					return false;
				}
			}
			return true;
		}
		function filte_checkbox(key,data,input_value){
			let menu_set = input_value;
			if(menu_set.size != 0){
				if(data[key]&&!menu_set.has(data[key])){
					return false;
				}
			}
			return true;
		}
		function get_filte_arr(property){
			let result = get_filte_info();
			let filte_set = new Set();
			if(result.is_space){
				for(let [key,value] of line_map){
					let result = value[property]
					if(result!=""&&result!==undefined&&result!==null){
						filte_set.add(result);
					}
				}
			}else{
				for(let [key,value] of line_map){
					if(check_filte(value,result)){
						let result = value[property]
						if(result!==""&&result!==undefined&&result!==null){
							filte_set.add(result);
						}
					}
				}
			}
			let filte_arr = Array.from(filte_set);
			filte_arr.sort();
			return filte_arr;
		}
		function get_filte_info(){ //获取筛选界面的参数
			let input_arr = document.getElementById('filte_div').querySelectorAll('.filte_input');
			let checkbox_div_arr = document.getElementById('filte_div').querySelectorAll('.filte_checkbox_div');
			let select_arr = document.getElementById('filte_div').querySelectorAll('.filte_select');
			let filte_checkbox_obj = {};
			let filte_input_obj = {};	
			let is_space = true;
			let change_button_color = false;
			for(let checkbox_div of checkbox_div_arr){
				let menu_set = new Set();
				let key = checkbox_div.id.substring(6, checkbox_div.id.length - 4);
				let filte_check_arr = checkbox_div.querySelectorAll('.filte_checkbox');  
				for(let filte_check of filte_check_arr){
					if(filte_check.checked){
						menu_set.add(filte_check.dataset.value);
						is_space = false;
						change_button_color = true;
					}
				}
				filte_checkbox_obj[key] = menu_set;
			}
			for(let input of input_arr){
				let key = input.id.substring(6, input.id.length - 6);
				if(road_data[key]&&road_data[key].filte&&road_data[key].filte.read){
					let value = road_data[key].filte.read(key)
					if(value!==""){
						filte_input_obj[key] = road_data[key].filte.read(key);
						is_space = false;
						change_button_color = true;
					}
				}
			}
			for(let select of select_arr){
				let key = select.id.substring(6, select.id.length - 6);
				if(road_data[key]&&road_data[key].filte&&road_data[key].filte.read){
					let value = road_data[key].filte.read(key)
					if(value !== ''){
						filte_input_obj[key] = road_data[key].filte.read(key);
						is_space = false;
						if(key !== 'is_work'){
							change_button_color = true;
						}else if(select.value === '否'){
							change_button_color = true;
						}
					}
				}
			}
			if(change_button_color){
				document.getElementById('filte_button').classList.add('select');
			}else{
				document.getElementById('filte_button').classList.remove('select');
			}
			return {
				is_space:is_space,
				filte_checkbox_obj:filte_checkbox_obj,
				filte_input_obj:filte_input_obj
			}
		}
	</script>		
    <script>
		function create_page(){
			let th_obj_arr = [];
			let check_filte_arr = [];
			let table_key_arr = [];	
			let road_info_arr = [];	
			let dropdown_arr = [];
			for(let key in road_data){
				if(road_data[key].table){
					if(road_data[key].table.index!==undefined&&road_data[key].table.index!==null){
						road_data[key].table['key'] = key
						road_data[key].table['name'] = road_data[key].name;
						th_obj_arr.push(road_data[key].table)
					}
					if(road_data[key].table.sort){
						let sort_info = road_data[key].table.sort;
						sort_info['key'] = key
						check_filte_arr.push(sort_info)
					}
				}
			}
			th_obj_arr.sort((a, b) => a.index - b.index);
			for(let  obj of th_obj_arr){
				table_key_arr.push(obj['key'])
			}

			
			check_filte_arr.sort((a, b) => a.index - b.index);
			for(let key in road_data){
				let info_display = road_data[key].info_display
				if(road_data[key].info_display){
					info_display['key'] = key;
					info_display['name'] = road_data[key].name;
					road_info_arr.push(road_data[key].info_display)
				}
				if(road_data[key].filte&&road_data[key].filte.type === 'input'&&road_data[key].filte.dropdown){
					dropdown_arr.push(key)
				}
			}
			road_info_arr.sort((a, b) => a.index - b.index);
			let roda_info_temp_div = document.createDocumentFragment();
			for(let obj of road_info_arr){
				let div = document.createElement('div');
				div.textContent = obj.name+':';
				let span = document.createElement('span');
				span.className = 'road_info_cell';
				span.id = 'read_'+obj['key'];
				div.appendChild(span);
				roda_info_temp_div.appendChild(div);
			}
			document.getElementById('road_info').appendChild(roda_info_temp_div);
			for(let key of dropdown_arr){
				let key_id = 'filte_'+key+'_div'
				let div = document.getElementById(key_id)
				if(div){
					let dropdown_menu = document.createElement('div');
					dropdown_menu.className = 'dropdown';
					dropdown_menu.id = 'filte_'+key+'_dropdown'
					let item_div = document.createElement('div');
					item_div.className = 'dropdown_item_div'
					item_div.id = 'filte_'+key+'_item_div'
					dropdown_menu.appendChild(item_div);
					div.appendChild(dropdown_menu);
				}
			}
			return {check_filte_arr:check_filte_arr,table_key_arr:table_key_arr};
		}
		async function start(adcode,adcode_lng,adcode_lat){
			if (typeof AMap === 'undefined') {
				await alert_fix('高德api的key设置参数错误');
				open_key_save_win();
				return;
			}			
			let basic_lay = new AMap.createDefaultLayer({zIndex: 2}); //基础图层
			let photo_lay = new AMap.TileLayer.Satellite({zIndex: 3,visible:false}); //卫星图层
			let city_part_lay = new AMap.DistrictLayer.Province({
				zIndex: 4, //设置图层层级
				adcode: adcode, //设置行政区 adcode
				depth: 2, //设置数据显示层级，0：显示国家面，1：显示省级，当国家为中国时设置depth为2的可以显示市一级
			}); //行政图层（用于显示城市的范围）
			city_part_lay.setStyles({
				"stroke-width": 2, //描边线宽
				fill:[100,100,0,0.1],
			});
			let road_lay = new AMap.TileLayer.RoadNet({zIndex:5}); //路网图层
			map = new AMap.Map('map_div', {
				zoom: 12,
				center: [adcode_lng, adcode_lat],
				layers: [basic_lay,photo_lay,city_part_lay,road_lay], 
				viewMode: '2D',
				  WebGLParams: {
					preserveDrawingBuffer: true // 关键：保留缓冲区供读取
				  }
			});

			await load_plugin("AMap.Scale")
			await load_plugin("AMap.Geolocation")
			await load_plugin("AMap.PlaceSearch")
			await load_plugin("AMap.MouseTool",)
			let Scale = new AMap.Scale(
				{
					position: {
					  top: '10px',
					  right: '10px'
					  
					}
				}
			);	
			let geolocation = new AMap.Geolocation({
				enableHighAccuracy: true,//是否使用高精度定位，默认:true
				position: {
				  bottom: '40px',
				  right: '20px',
				},    //定位按钮的停靠位置
				zoomToAccuracy: true,   //定位成功后是否自动调整地图视野到定位点

			});	
			placeSearch = new AMap.PlaceSearch({
			  city: adcode,
			  pageSize: 10, 
			  map:map
			});	
			mouseTool = new AMap.MouseTool(map);
			map.addControl(Scale);
			map.addControl(geolocation);		
			map.on('click', async function(e) {	
				let lng = e.lnglat.getLng();
				let lat = e.lnglat.getLat();
				add_click_mark(lng,lat);
				cance_select_line();
			});	
			// ----------初始化地图END----------
		  // 绑定事件监听
			document.getElementById('search_input').addEventListener('keydown', function(event) {
				let search_input = document.getElementById('search_input');
				if (event.key === 'Enter') {
					event.preventDefault(); // 阻止默认行为（如页面刷新）
					let key_word = search_input.value;
					document.getElementById('search_result_div').dataset.key_word = key_word
					get_seach_menu(key_word,1);
				}
			});	
			document.getElementById('file_input').addEventListener('change', async function(e){
				let data_count = 0;
				let files = e.target.files
				let isConfirmed = await confirm_fix("JSON格式数据会覆盖相同路段识别码的数据，是否继续?");
				if(!isConfirmed){
					document.getElementById('file_input').value = null;
					return;
				};
				for(let j = 0;j<files.length;j++){
					let file = files[j]
					const text_content = await read_file_as_text(file); // 异步读取文件
					if(!text_content){
						return;
					}
					if(file.name.toLowerCase().endsWith('.geojson')) {
						try{
							let load_obj = JSON.parse(text_content);
							for(let i = 0;i<load_obj.features.length;i++){
								data_count++;
							}
							let filte_result = get_filte_info();
							try{
								await add_data(load_obj)
							}catch(err){
								console.log(err)
								document.getElementById('file_input').value = null;
								return;
							}
							
							for(let i=0;i<load_obj.features.length;i++){
								let line_base_data_obj = get_base_data_from_load_obj(load_obj,i);
								if(check_filte(line_base_data_obj,filte_result)){//筛选，和服务器筛选逻辑相同
									let line_all_info_obj = load_line_data(load_obj,i);
									let road_part_id = line_all_info_obj.road_part_id;
									if(road_part_id){
										let old_line_obj = line_map.get(road_part_id)
										if(old_line_obj){
											map.remove(old_line_obj.start_mark);
											map.remove(old_line_obj.end_mark);
											map.remove(old_line_obj.line);
											old_line_obj.start_mark.destroy();
											old_line_obj.end_mark.destroy();
											old_line_obj.line.destroy();
											line_map.delete(road_part_id)
										}
										line_map.set(road_part_id,line_all_info_obj);
									}
								}
							}//本地更新
						}catch(err){
							console.log(err);
							await alert_fix('JSON解析失败');
							return;
						}
					}
					updata_table(line_map);
				}
				await alert_fix('导入成功,共导入'+String(data_count)+'条数据');
				document.getElementById('file_input').value = null;
			});	
			document.getElementById('main_div').addEventListener('click', async function(event){
				const target = event.target;
				let menu = document.getElementById('menu');
				if(target.id == 'menuspan'){
					if(menu.classList.contains('expanded')){
						close_opening_menu(ui_menu_set);
					}else{
						close_opening_menu(ui_menu_set);
						expand_menu(menu,ui_menu_set);
					}
				}else{
					close_opening_menu(ui_menu_set);
				}
				close_opening_menu(open_menu_set);
				if(target.id === 'line_table_button'){
					const table1Mode = document.getElementById('table1_mode');
					const roadInfoMode = document.getElementById('road_info_mode');
					const lineTableButton = document.getElementById('line_table_button');
					const basicRoadInfoButton = document.getElementById('basic_road_info_button');					
					table1Mode.classList.add('display');
					roadInfoMode.classList.remove('display');
					lineTableButton.classList.add('active');
					basicRoadInfoButton.classList.remove('active');				
				}else if(target.id === 'basic_road_info_button'){
					const table1Mode = document.getElementById('table1_mode');
					const roadInfoMode = document.getElementById('road_info_mode');
					const lineTableButton = document.getElementById('line_table_button');
					const basicRoadInfoButton = document.getElementById('basic_road_info_button');					
					roadInfoMode.classList.add('display');
					table1Mode.classList.remove('display');
					basicRoadInfoButton.classList.add('active');
					lineTableButton.classList.remove('active');				
				}else if( target.id === 'road_face_area_input'){
						if(!document.getElementById('road_face_area_input').value&&document.getElementById('road_long_input')&&document.getElementById('road_face_width_input')){
							let road_long = document.getElementById('road_long_input').value
							let road_width = document.getElementById('road_face_width_input').value
							let area = Number(road_long)*Number(road_width)
							if(area){
								document.getElementById('road_face_area_input').value = area
							}
						}
					
				}else if(target.id === 'search_button'){
					  let search_input = document.getElementById('search_input');
					  let key_word = search_input.value;
					  document.getElementById('search_result_div').dataset.key_word = key_word;
					  get_seach_menu(key_word,1);
				}else if(target.id === 'search_clear_button'){
					let search_input = document.getElementById('search_input');
					document.getElementById('search_result_div').classList.remove('expanded'); 
					let item_div = document.getElementById('item_div');
					search_input.value = '';
					item_div.innerHTML = '';
					document.getElementById('search_result_div').removeAttribute('key_word');
					if(placeSearch){
						placeSearch.clear();
					}
				}else if(target.id === 'back_page'){
					let page_index_div = document.getElementById('page_index_div');	
					let total_page_div = document.getElementById('total_page_div');
					let total_page = Number(total_page_div.textContent)||1;
					let page_index = Number(page_index_div.textContent)||1;
					let key_word = document.getElementById('search_result_div').dataset.key_word||"";
					if(page_index>1){
						page_index = page_index-1
						get_seach_menu(key_word,page_index)
					}else if(page_index!=1){
						get_seach_menu(key_word,1)
					}
				}else if(target.id === 'forward_page'){
					let page_index_div = document.getElementById('page_index_div');	
					let total_page_div = document.getElementById('total_page_div');
					let total_page = Number(total_page_div.textContent)||1;
					let page_index = Number(page_index_div.textContent)||1;
					let key_word = document.getElementById('search_result_div').dataset.key_word||"";
					if(page_index<total_page){
						page_index++
						get_seach_menu(key_word,page_index)
					}else if(page_index != total_page){
						get_seach_menu(key_word,total_page)
					}
				}else if(event.target.closest('#page_info')){
					let page_index_div = document.getElementById('page_index_div');	
					let total_page_div = document.getElementById('total_page_div');
					let total_page = Number(total_page_div.textContent)||1;
					let page_index_str = page_index_div.textContent; 
					let page_index = Number(await prompt_fix("请输入页码：",page_index_str))||1;
					let key_word = document.getElementById('search_result_div').dataset.key_word||"";
					if(page_index>0&&page_index<=total_page){
						get_seach_menu(key_word,page_index);
					}else if(page_index<1){
						get_seach_menu(key_word,1);
					}else if(page_index>total_page){
						get_seach_menu(key_word,total_page);
					}
				}else if(event.target.closest('#item_div')){
					let select = event.target.closest('.dropdown-item')
					let lnglat = select.dataset.location.split(',');
					 map.setZoom(20);
					 map.setCenter(lnglat);
				}else if(target.id === 'basic_lay_check'){
					let basic_lay_check = document.getElementById('basic_lay_check');
					if(basic_lay_check.checked){
						basic_lay.show();
					}else{
						basic_lay.hide();
					}
				}else if(target.id === 'photo_lay_check'){
					let photo_lay_check = document.getElementById('photo_lay_check');
					if(photo_lay_check.checked){
						photo_lay.show();
					}else{
						photo_lay.hide();
					}
				}else if(target.id === 'city_part_lay_check'){
					let city_part_lay_check = document.getElementById('city_part_lay_check');
					if(city_part_lay_check.checked){
						city_part_lay.show();
					}else{
						city_part_lay.hide();
					}
				}else if(target.id === 'road_lay_check'){
					let road_lay_check = document.getElementById('road_lay_check');
					if(road_lay_check.checked){
						road_lay.show();
					}else{
						road_lay.hide();
					}
				}else if(target.id === 'hide_table_button'){
					const hide_table_button = document.getElementById('hide_table_button');
					if(hide_table_button.dataset.state === '隐藏菜单'){
						handle_swipe_down()
					}else{
						handle_swipe_up()
					}
				}else if(target.id === 'filte_button'){
					modal_work(1,'filte_div');
				}else if (target.id === 'filte_confirmButton'){
					modal_work(0);
					await filte_data()
					await creat_auto_destroy_info('共'+String(line_map.size)+'条数据',2500)
				}else if(target.id === 'filte_canceButton'){
					modal_work(0);
				}else if(event.target.closest('.filte_input')){
					let target_id = event.target.closest('.filte_input').id;
					let key = target_id.substring(6, target_id.length - 6);
					click_filte_input(key)
				}else if(event.target.closest('.dropdown_item_div')){
					let target_id = event.target.closest('.dropdown_item_div').id;
					let key = target_id.substring(6, target_id.length - 9);
					let select = event.target.closest('.dropdown-item');
					if(select){
						if(road_data[key].filte&&road_data[key].filte.write){
							road_data[key].filte.write(key,select.dataset.value)
						}
					}
				}else if(event.target.id === 'all_check'){
					let all_check = document.getElementById('all_check');
					let table1body = document.getElementById('table1body');
					let checkboxes = table1body.querySelectorAll('.row-check');
					for(let checkbox of checkboxes){
						checkbox.checked = all_check.checked;
						if(checkbox.checked){
							select_set.add(checkbox.closest('.table_card').dataset.id)
						}else{
							select_set.delete(checkbox.closest('.table_card').dataset.id)
						}
					}
				}else if(target.id ==='hide_select_line_button'){
					if(!select_line_id){
						return await alert_fix('请先选择路线');
					};
					let line_obj = line_map.get(select_line_id);
					if(!line_obj){
						return;
					};
					let display = line_obj.display;
					if(display){
						document.getElementById('hide_select_line_button_img').src = "dir/img/icon/display_line_text_icon.svg";
						if(line_obj.line){
							line_obj.line.hide();
						}
						if(line_obj.start_mark){
							line_obj.start_mark.hide();
						}
						if(line_obj.end_mark){
							line_obj.end_mark.hide();
						}
						line_obj.display = false;
					}else{
						document.getElementById('hide_select_line_button_img').src = "dir/img/icon/hide_line_text_icon.svg";
						if(line_obj.line){
							line_obj.line.show();
						}
						if(line_obj.start_mark){
							line_obj.start_mark.show();
						}
						if(line_obj.end_mark){
							line_obj.end_mark.show();
						}
						line_obj.display = true;					
					}
				
				}else if(target.id ==='click_guide_button'){
					if(click_icon){
						let obj = click_icon.getPosition()
						let lng = obj.lng;
						let lat = obj.lat;
						let url = gotoaddress(lng,lat)
						if(url){
							window.location.href = url
						}						
					}else{
						await alert_fix('请先点击地图确定目的地')
					}
				
				}else if(target.id === 'detail_page_button'){
					clear_detail_cell();
					if(select_line_id){
						let line_obj = line_map.get(select_line_id);
						if(!line_obj){
							return;
						}
						for(let key in road_data){
							let key_id = key+'_detail_page'
							let dom = document.getElementById(key_id)
							if(dom){
								if(road_data[key].display_str){
									let str = road_data[key].display_str(key,line_obj)
									dom.textContent = str
								}else{
									dom.textContent = "";
								}
							}
						}
					
					}
					modal_work(1,'detail_table_div');
				}else if(event.target.closest('#delete_line_button')){
					await delete_select_line()
				}else if(event.target.closest('#export_line_button')){
					modal_work(1,'export_table_div')
				}else if(target.id === 'export_confirmButton'){
					try{
						await export_select_line()
					}catch(err){
						alert(err)
					}
				}else if(target.id === 'get_pile_button'){
					if(state.is_pile_mode){
						state.is_pile_mode = false;
						document.getElementById('get_pile_button').classList.remove('select');
					}else{
						document.getElementById('get_pile_button').classList.add('select');
						state.is_pile_mode = true;
					}
				}else if(event.target.closest('#hide_line_button')){
					hide_select_line()
				}else if(event.target.closest('#display_line_button')){
					display_select_line()
				}else if(target.id === 'edit_line_button'){
					if(!select_line_id){
						return await alert_fix('请先选择路线');
					}
					let road_part_id = select_line_id;
					open_edit_modal(road_part_id);
				}else if(event.target.closest('.table_card')){
					if(event.target.closest('.select_td')){
						if(event.target.className === 'row-check'){
							if(event.target.checked){
								select_set.add(event.target.closest('.table_card').dataset.id)
							}else{
								select_set.delete(event.target.closest('.table_card').dataset.id)
							}
						}
					}else{
						let table_card = event.target.closest('.table_card');
						let road_part_id = table_card.dataset.id;
						select_line(road_part_id,1)				
					}
				}else if (target.id === 'confirmButton'){
					await update_road_info();
				}else if(target.id === 'canceButton'||target.id === 'close_icon'){
					modal_work(0);
				}else if(event.target.closest('#load_line_button')){
					document.getElementById('file_input').click();
				}else if(event.target.closest('#key_manage_button')){
					open_key_save_win();
				}
			});
			await filte_data();
		}
		function gotoaddress(dlon,dlat) {
			if(dlon===undefined||dlon===null||dlat===undefined||dlat===null){
				return "";
			}
			let  namne = '点击位置';
			let userAgent = navigator.userAgent;
			let dname = encodeURIComponent(name);
			//dev是否偏移(0: lat 和 lon 是已经加密后的,不需要国测加密; 1:需要国测加密)
			if (/iPhone|iPad|iPod/i.test(userAgent)) {
				// iOS设备使用的链接格式
				let url = "iosamap://path?sourceApplication=webapp&backScheme=myapp://&t=0&lat=" + dlat + "&lon=" + dlon + "&dev=0&dname=" + dname;
				return url;
			} else if (/Android/i.test(userAgent)) {
				// 安卓设备使用的链接格式
				let url = "androidamap://route?sourceApplication=webapp&dev=0&t=0&dlat=" + dlat + "&dlon=" + dlon + "&dname=" + dname;
				return url;
			} else {
				// PC或非移动设备使用的链接格式
				let url = 'https://uri.amap.com/marker?position='+dlon+','+dlat+'&name='+name+'&coordinate=gaode&callnative=1';
				return url;
			}
		}		
		function load_plugin(pluginName) {
			return new Promise((resolve, reject) => {
				AMap.plugin(pluginName, () => resolve());
			});
		}		
		function read_file_as_text(file) {
			return new Promise((resolve, reject) => {
				let reader = new FileReader();
				reader.onload = (e) => resolve(e.target.result); 
				reader.onerror = (e) => reject(new Error('文件读取错误'));
				reader.readAsText(file); // 以文本格式读取文件
			});
		}
		async function filte_data(){
			let filte_obj = get_filte_info();
			let load_data = null;
			try{
				if(filte_obj.is_space){
					load_data = await get_all_data();//从服务器或者数据库中获取数据
				}else{
					load_data = await get_filte_data_from_server(filte_obj); //获取服务器数据
				}
			}catch(err){
				console.log(err);
				return;
			}
			cance_select_line();
			if(load_data!== null||load_data!==undefined){
				for(let [road_part_id,line_obj] of line_map){
					map.remove(line_obj.line)
					map.remove(line_obj.start_mark)
					map.remove(line_obj.end_mark)
					line_obj.line.destroy()
					line_obj.start_mark.destroy()
					line_obj.end_mark.destroy()
					line_obj = null;
				}
				line_map.clear();
				for(let i=0;i<load_data.features.length;i++){
					let line_base_data_obj = get_base_data_from_load_obj(load_data,i);
					let road_part_id = line_base_data_obj.road_part_id;
					if(road_part_id){
						let line_all_info_obj = load_line_data(load_data,i);
						line_map.set(road_part_id,line_all_info_obj);
					}
				}//本地更新
				updata_table(line_map);
			}
		}
		function select_line(road_part_id,mode){
			if(!road_part_id){
				return;
			}
			let obj = line_map.get(road_part_id);
			if(!obj){
				return;
			}
			let line = obj.line;
			let select_line_obj = line_map.get(select_line_id)
			if(select_line_obj){
				let select_line = select_line_obj.line;
				if(select_line_obj.display){
					select_line_obj.start_mark.show();
					select_line_obj.end_mark.show();
					select_line.show();
				}else{
					select_line_obj.start_mark.hide();
					select_line_obj.end_mark.hide();
					select_line.hide();
				}
			}
			select_line_change_color(road_part_id);
			obj.line.show();
			obj.start_mark.show();
			obj.end_mark.show();
			display_road_info(obj);
			if(mode){
				map.setFitView(line);
			}
			if(obj.display){
				document.getElementById('hide_select_line_button_img').src = "dir/img/icon/hide_line_text_icon.svg";			
			}else{
				document.getElementById('hide_select_line_button_img').src = "dir/img/icon/display_line_text_icon.svg";			
			}
		}		
		function cance_select_line(){ //取消（地图选择）选中路线
			if(select_line_id){
				let select_line_obj = line_map.get(select_line_id)
				if(select_line_obj){
					let line = select_line_obj.line;
					line.setOptions({strokeColor: gaode.basic_line_color,zIndex:13});
					let start_mark = select_line_obj.start_mark;
					let end_mark = select_line_obj.end_mark;
					start_mark.setOptions({zIndex:14});
					end_mark.setOptions({zIndex:15});
					if(select_line_obj.display){
						start_mark.show();
						end_mark.show();
						line.show();
					}else{
						start_mark.hide();
						end_mark.hide();
						line.hide();
					};
				}
				select_line_id = "";
				display_road_info();
			}
		}		
		async function delete_select_line(){ //删除选中的路线
			if(select_set.size === 0){
				return;
			}
			let isConfirmed = await confirm_fix("是否删除?");
			if(!isConfirmed){
				return;
			};
			let road_prat_id_arr = Array.from(select_set)
			let delete_count = await delete_data(road_prat_id_arr);
			for(let road_part_id of road_prat_id_arr){
				let obj = line_map.get(road_part_id)
				map.remove(obj.start_mark)
				map.remove(obj.end_mark)
				map.remove(obj.line)
				obj.start_mark.destroy();
				obj.end_mark.destroy();
				obj.line.destroy();
				line_map.delete(road_part_id);
				if(road_part_id === select_line_id){
					select_line_id = "";
				};
			};
			let table1body = document.getElementById('table1body');
			let table_card_arr = table1body.querySelectorAll('.table_card');
			for(let table_card of table_card_arr){
				if(select_set.has(table_card.dataset.id)){
					table1body.removeChild(table_card);
				}
			}
			select_set.clear();
			await alert_fix('共删除'+String(delete_count)+'条路线')
		}
		function get_export_info(){
			let export_type = document.getElementById('export_type').value
			let obj = {
					export_type:export_type,
				}
			return obj;
		}		
		async function export_select_line(){ //导出选中（表格）路线
			modal_work(0);
			let export_arr = [];
			let info_obj = get_export_info()
			let export_type = info_obj.export_type;
			if(export_type === 'GEOJSON'){
				for(let select of select_set){
					let obj = line_map.get(select);
					export_arr.push(obj);
				};
				let json_string =""
				let filename = '路径数据.geojson'
				if(export_arr.length){
					let export_obj = export_geojson(export_arr,'GCJ02');
					json_string = JSON.stringify(export_obj);
				}else{
					return;
				}
				await downloadTextAsFile(json_string,filename);
			}else if(export_type === 'GEOJSONGPS'){
				let check_point_arr = [];
				let path_point_arr = [];
				for(let select of select_set){
					let obj = line_map.get(select);
					let check_point = [];
					let path_point = [];
					if(obj.coord_type === 'GCJ02'){
						if(obj.check_point){
							for(let point of obj.check_point){
								let gps = coordtransform.gcj02towgs84(point[0],point[1]);
								check_point.push(gps)
							}
						}

						if(obj.path_point){
							for(let point of obj.path_point){
								let gps = coordtransform.gcj02towgs84(point[0],point[1]);
								path_point.push(gps)
							}
						}
					}else{
						check_point = obj.check_point
						path_point =  obj.path_point
					}
					check_point_arr.push(check_point);
					path_point_arr.push(path_point);
					obj.coord_type = 'WGS84';
					export_arr.push(obj);
				};
				let json_string =""
				let filename = '路径数据GPS.geojson'
				if(export_arr.length){
					let export_obj = export_geojson(export_arr,'WGS84');
					for(let i= 0;i<export_obj.features.length;i++){
						export_obj.features[i].properties.check_point = check_point_arr[i]
						export_obj.features[i].geometry.coordinates = path_point_arr[i]
					}
					json_string = JSON.stringify(export_obj);
				}else{
					return;
				}
				await downloadTextAsFile(json_string,filename);
			}
		}
		function get_pile(path_point,pos,start,end){
			if (path_point.length < 2) {
				return 0;
			}
			if(start===null||end===null||start===undefined||end===undefined){
				return null;
			}
			let md = null; 
			let md_index = 0;
			for (let i = 0; i < path_point.length - 1; i++) {
				const p1 = path_point[i];
				const p2 = path_point[i + 1];
				const d = AMap.GeometryUtil.distanceToSegment(pos, p1, p2);
				if(i === 0){
					md = d;
					md_index = 0;
				}else if(d < md) {
					md = d;
					md_index = i;
				}
			}
			let p1 = path_point[md_index];
			let p2 = path_point[md_index+1];
			let sd = AMap.GeometryUtil.distance(p1,pos)
			let ed = AMap.GeometryUtil.distance(p2,pos)
			let ld = AMap.GeometryUtil.distance(p1,p2)
			let part_line_long = 0;
			
			if(sd*sd-md*md>ld*ld||ed*ed-md*md>ld*ld){
				if(sd<ed){
					part_line_long = 0
				}else{
					part_line_long = ld
				}
			}else{
				part_line_long = Math.sqrt(sd*sd-md*md)
			}
			let part_line_path_point = [];
			for(i = 0;i<=md_index;i++){
				part_line_path_point.push(path_point[i])
			}
			let l1 = 0;
			if(part_line_path_point.length>=2){
				l1 = AMap.GeometryUtil.distanceOfLine(part_line_path_point)
			}
			let total_line = AMap.GeometryUtil.distanceOfLine(path_point)
			l1 = l1+part_line_long;
			let pro = l1/total_line
			let pile = (start+((end-start)*pro)).toFixed(3);
			return Number(pile);
		}
		function hide_select_line(){ //隐藏选中路段
			for(let select of select_set){
				let obj = line_map.get(select)
				hide_line(obj,true);
				obj.display = false;
			}
		}
		function hide_line(obj,mode){//隐藏选中路段根据id
			if(!obj){
				return;
			}
			if(select_line_id === obj.road_part_id){
				cance_select_line()
			}
			obj.line.hide();
			let road_part_id = obj.road_part_id
			if(road_part_id&&road_part_id === select_line_id){
				select_line_id = '';
				obj.line.setOptions({strokeColor: gaode.basic_line_color,zIndex:13});
				let start_mark = obj.start_mark;
				let end_mark = obj.end_mark;					
				start_mark.setOptions({zIndex:14});
				end_mark.setOptions({zIndex:15});				
			}
			obj.start_mark.hide();
			obj.end_mark.hide();
			if(mode){
				obj.display = false;		
			}
		}		
		function display_select_line(){ //显示选中路线
			for(let select of select_set){
				let obj = line_map.get(select);				
				obj.start_mark.show();
				obj.end_mark.show();
				obj.line.show();
				obj.display = true;
			}
		}
		function get_filte_map(map){ //获取符合条件的路段
			let filte_map = new Map();
			let result = get_filte_info();
			if(result.is_space){
				return map;
			}else{
				for(let [key,value] of map){
					if(check_filte(value,result)){
						filte_map.set(key,value);
					}else{
						hide_line(value,false);
					};
				}
				return filte_map;
			}
		}
		function display_road_info(line_obj){
			const cell_arr = document.getElementById('road_info').querySelectorAll('.road_info_cell');
			for(let cell of cell_arr){
				cell.textContent = "";
			}		
			if(!line_obj){
				return;
			}
			for(let key in line_obj){
				let dom_id = 'read_'+key ;
				let dom = document.getElementById(dom_id);
				if(dom){
					if(road_data[key]&&road_data[key].display_str){
						dom.textContent = road_data[key].display_str(key,line_obj);
					}
				}
			}
		}
		async function update_road_info(){ //编辑界面确定函数
			const confirmButton = document.getElementById('confirmButton');
			const original_road_part_id = confirmButton.dataset.editingId;
			if (!original_road_part_id) {
				await alert_fix('未找到要编辑的路线');
				return;
			}

			if(!document.getElementById('road_part_id_input').value||!document.getElementById('road_id_input').value){
				await alert_fix('路线识别码和路段编号不能为空');
				return ;
			}
			let new_road_part_id = road_data['road_part_id'].input.read('road_part_id');

			// 如果路段识别码被修改，检查新ID是否已存在
			if (new_road_part_id !== original_road_part_id) {
				let check_result = await check_data(new_road_part_id);
				if(check_result){
					let isConfirmed  = await confirm_fix('新的路段识别码已经存在，是否覆盖？')
					if(!isConfirmed){
						return;
					}
				}
			}
			
			let updated_info = {};
			for(let key in road_data){
				if(road_data[key].input && road_data[key].input.read){
					updated_info[key] = road_data[key].input.read(key);
				}
			};	
			
			if(updated_info.direction == '上行' && updated_info.start_pile > updated_info.end_pile){
				await alert_fix('上行(右幅)开始桩号必须小于结束桩号');
				return;
			};
			if(updated_info.direction == '下行' && updated_info.start_pile < updated_info.end_pile){
				await alert_fix('下行(左幅)开始桩号必须大于结束桩号');
				return;
			};
			
			modal_work(0);

			// 更新 line_map 中的数据
			const original_line_obj = line_map.get(original_road_part_id);
			if (!original_line_obj) {
				await alert_fix('在地图数据中未找到原始路线');
				return;
			}

			Object.assign(original_line_obj, updated_info);

			let final_line_obj = original_line_obj;

			// 如果ID改变，需要处理map中的key
			if (new_road_part_id !== original_road_part_id) {
				line_map.delete(original_road_part_id);
				final_line_obj.line.setExtData({road_part_id: new_road_part_id});
				line_map.set(new_road_part_id, final_line_obj);
				// 如果旧ID是被选中的，更新选中ID
				if(select_line_id === original_road_part_id) {
					select_line_id = new_road_part_id;
				}
			}

			// 保存到数据库
			try{
				let geojson_obj = export_geojson([final_line_obj],'GCJ02');
				await add_data(geojson_obj); // add_data会处理更新逻辑
			}catch(err){
				console.log(err);
				await alert_fix('数据保存失败');
				// 这里可能需要回滚本地修改
				return;
			}

			await alert_fix('更新成功！');
			updata_table(line_map);
			display_road_info(final_line_obj);
		}
		async function downloadTextAsFile(content, fileName) {//文件导出函数
			const blob = new Blob([content], { type: 'text/plain;charset=utf-8' });
			if(!window.Android){
				const url = URL.createObjectURL(blob);
				const link = document.createElement('a');
				link.href = url;
				link.download = fileName;
				link.style.display = 'none';
				document.body.appendChild(link);
				link.click();
				document.body.removeChild(link);
				URL.revokeObjectURL(url); // 释放内存[1,8](@ref)
			}else{
				let base64data = await blobToBase64(blob)
				try{
					await Android_download(base64data, fileName, '', 'file')
				}catch(err){
					alert(err)
				}
			}
		}
		function add_click_mark(lng,lat){
			if(click_icon){
				click_icon.setPosition([lng,lat])
			}else{
				click_icon = new AMap.Marker({
					position: [lng, lat], // 圆心位置
					icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png", // 蓝色标记图标
					offset: new AMap.Pixel(-13, -30), // 图标偏移量，使图标底部对准圆心
					zIndex: 20 // 确保标记显示在圆形上方
				});	
				click_icon.setMap(map);
			}
		}
		function draw_line_by_path_point(path,road_part_id){ //核心代码,利用路径点（二维数组）绘制路线
			let path_point = path.slice();
			let startMarker = new AMap.Marker({
				position: path_point[0],
				zIndex:14,
				offset: new AMap.Pixel(-13, -30),
				icon: 'https://webapi.amap.com/theme/v1.3/markers/n/start.png',
				map: map
			})
			let endMarker = new AMap.Marker({
				position: path_point[path_point.length - 1],
				zIndex:15,
				offset: new AMap.Pixel(-13, -30),
				icon: 'https://webapi.amap.com/theme/v1.3/markers/n/end.png',
				map: map
			})
			let routeLine = new AMap.Polyline({
				path: path_point,
				borderWeight: 1,
				strokeWeight: gaode.basic_line_width,
				strokeOpacity: gaode.basic_line_alpha,
				strokeColor: gaode.basic_line_color,
				lineJoin: 'round',
				lineCap:'round',
				cursor:'pointer',
				zIndex:13,
				showDir:true,
				clickable: true
			})
			routeLine.on('click',async function (e){
				let line = e.target
				let line_info = line.getExtData();
				let road_part_id = line_info.road_part_id;
				select_line(road_part_id,0);
				let lng = e.lnglat.getLng()
				let lat = e.lnglat.getLat()
				add_click_mark(lng,lat)
				if(state.is_pile_mode){
					let pos = [lng,lat]
					let obj = line_map.get(road_part_id);
					let path_point = obj.path_point;
					let start = obj.start_pile;
					let end = obj.end_pile;
					if(path_point){
						let pile = get_pile(path_point, pos, start, end)
						let pile_str = get_pile_by_number(pile);
						await creat_auto_destroy_info(pile_str,2500);
					}
				}
			})
			routeLine.setExtData({road_part_id:road_part_id});			
			map.add(routeLine);
			let obj = {
				start_mark:startMarker,
				end_mark:endMarker,
				line:routeLine,
				path_point:path_point
			}
			return obj;
		}	
		function clear_road_info(){
			for(let key in road_data){
				if(road_data[key].input&&road_data[key].input.write){
					road_data[key].input.write(key,road_data[key].read_default)
				}
			}
		}
		function export_geojson(line_obj_arr){
			let muluti_obj = {
			  "type": "FeatureCollection",
			  "features": [
			  ]
			};
			for(let line_obj of line_obj_arr){
				let obj = {
				  "type": "Feature",
				  "properties": {
				  },
				  "geometry": {
					"type": "LineString",
				  }
				}
				for(let key in line_obj){
					if(road_data[key]&&road_data[key].export_data&&road_data[key].is_export){
						road_data[key].export_data(key,line_obj[key],obj)
					}				
				}
				obj.properties.name = '['+line_obj['road_part_id']+']'+line_obj['road_name']
				muluti_obj.features.push(obj);
			}
			return muluti_obj;
		}
		function get_base_data_from_load_obj(load_obj,i){
			let line_base_info_obj = {};
			for(let key in road_data){
				line_base_info_obj[key] = road_data[key].load_read(key,load_obj,i);
			};
			return line_base_info_obj;
		}
		function load_line_data(load_obj,i){
			let line_all_info_obj = {}
			for(let key in road_data){
				line_all_info_obj[key] = road_data[key].load_read(key,load_obj,i)
			};
			let road_part_id = line_all_info_obj.road_part_id
			let path_point = [];
			let coord_type = load_obj.features[i].properties.coord_type;
			if(!coord_type||coord_type==='WGS84'){
				for(let point of line_all_info_obj.path_point){
					let coord = coordtransform.wgs84togcj02(point[0],point[1]);
					path_point.push(coord)
				}
			}else if(coord_type === 'GCJ02'){
				path_point = line_all_info_obj.path_point.slice();
			}			
			let new_line_obj = draw_line_by_path_point(path_point,road_part_id);
			let start_mark = new_line_obj.start_mark;
			let end_mark = new_line_obj.end_mark;
			let line = new_line_obj.line;
			line_all_info_obj.line = line;
			line_all_info_obj.start_mark = start_mark;
			line_all_info_obj.end_mark = end_mark;
			let old_line_obj = line_map.get(road_part_id)
			
			if(old_line_obj){
				map.remove(old_line_obj.start_mark);
				map.remove(old_line_obj.end_mark);
				map.remove(old_line_obj.line);
				old_line_obj.start_mark.destroy();
				old_line_obj.end_mark.destroy();
				old_line_obj.line.destroy();
				line_map.delete(road_part_id)
			}		
			
			return line_all_info_obj;
		}		
		function select_line_change_color(road_part_id){
			let line_obj = line_map.get(road_part_id);
			let line = line_obj.line;
			let start_mark = line_obj.start_mark;
			let end_mark = line_obj.end_mark;					
			start_mark.setOptions({zIndex:24});
			end_mark.setOptions({zIndex:25});
			line.setOptions({strokeColor: gaode.select_line_color,zIndex:23});
			if(select_line_id){
				let select_line_obj = line_map.get(select_line_id)
				if(select_line_obj){
					let select_line = select_line_obj.line;
					if(select_line_id != road_part_id){
						select_line.setOptions({strokeColor: gaode.basic_line_color,zIndex:13});
						let start_mark = select_line_obj.start_mark;
						let end_mark = select_line_obj.end_mark;					
						start_mark.setOptions({zIndex:14});
						end_mark.setOptions({zIndex:15});				
					}
				}
			}
			select_line_id = road_part_id;
		}
		
		function open_edit_modal(road_part_id) {
			const line_obj = line_map.get(road_part_id);
			if (!line_obj) {
				alert_fix('未找到要编辑的路线数据');
				return;
			}
			// 填充表单
			for (let key in road_data) {
				if (road_data[key].input && road_data[key].input.write) {
					road_data[key].input.write(key, line_obj[key]);
				}
			}
			// 存储当前编辑的ID
			document.getElementById('confirmButton').dataset.editingId = road_part_id;
			modal_work(1, 'table_div');
		}

		function check_filte(value,filte_result){ //筛选逻辑
			let filte_input_obj = filte_result.filte_input_obj
			let filte_checkbox_obj = filte_result.filte_checkbox_obj
			for(let key in filte_input_obj){
				if(filte_input_obj[key]!==""&&filte_input_obj[key]!== undefined &&road_data[key].filte&&road_data[key].filte.check){
					let result = road_data[key].filte.check(key,value,filte_input_obj[key]);
					if(!result){
						return false;
					}
				}
			}
			for(let key in filte_checkbox_obj){
				if(filte_checkbox_obj[key]!==""&&filte_checkbox_obj[key]!== undefined &&road_data[key].filte&&road_data[key].filte.check){
					let result = road_data[key].filte.check(key,value,filte_checkbox_obj[key])
					if(!result){
						return false;
					}
				}
			}
			return true;
		}
    </script>
	<script>
		// 检查参数是否存在
		function check_local_storage(){
			const key = localStorage.getItem('amap_key');
			const safe_key = localStorage.getItem('amap_safe_key');
			const adcode = localStorage.getItem('adcode');
			const adcode_lng = localStorage.getItem('adcode_lng');
			const adcode_lat = localStorage.getItem('adcode_lat');
			let basic_info_obj =  {
				api_key:key,
				safe_key:safe_key,
				adcode:adcode,
				adcode_lng:adcode_lng,
				adcode_lat:adcode_lat,
			};
			return basic_info_obj
		}	
		async function save_key_and_adcode(){
			let key = document.getElementById('aip_key_input').value.trim();
			let safeKey = document.getElementById('aip_safe_key_input').value.trim();
			let adcode = document.getElementById('adcode_input').value.trim();
			let adcode_lng = Number(document.getElementById('adcode_lng_input').value.trim());
			let adcode_lat = Number(document.getElementById('adcode_lat_input').value.trim());
			if(!adcode_lng){
				adcode_lng = 116.397428
			}
			if(!adcode_lat){
				adcode_lat = 39.90923
			}			
			localStorage.setItem('amap_key', key);
			localStorage.setItem('amap_safe_key', safeKey);
			localStorage.setItem('adcode', adcode);
			localStorage.setItem('adcode_lng', adcode_lng);
			localStorage.setItem('adcode_lat', adcode_lat);
			close_key_save_win();
			await alert_fix('参数已保存！');
			let basic_info_obj =  {
				api_key:key,
				safe_key:safeKey,
				adcode:adcode,
				adcode_lng:adcode_lng,
				adcode_lat:adcode_lat,
			};			
			return basic_info_obj			
		}
		let {check_filte_arr,table_key_arr} = create_page();//根据参数生成页面
		let basic_info = check_local_storage();
		let api_key = basic_info.api_key
		let safe_key = basic_info.safe_key
		let adcode = basic_info.adcode
		let adcode_lng = 116.397428
		let adcode_lat = 39.90923
		if(basic_info.adcode_lng){
			adcode_lng = Number(basic_info.adcode_lng);
		}else if(basic_info.adcode_lng === "0"){
			adcode_lng = 0;
		}
		if(basic_info.adcode_lat){
			adcode_lat = Number(basic_info.adcode_lat);	
		}else if(basic_info.adcode_lat === "0"){
			adcode_lat = 0;	
		}
		async function basic_setting(){	
			if(!api_key||!safe_key||!adcode){
				let key_obj = await open_key_save_win(false);
				if(!key_obj){
					return;
				}
				api_key = key_obj.api_key
				safe_key = key_obj.safe_key
				adcode = key_obj.adcode
				adcode_lng = key_obj.adcode_lng
				adcode_lat = key_obj.adcode_lat				
			}
			window._AMapSecurityConfig = {
				securityJsCode: safe_key,
			}
			let script = document.createElement('script');
			document.body.appendChild(script);
			script.onload = async ()=>{
				await start(adcode,adcode_lng,adcode_lat)
			}	
			script.src = 'https://webapi.amap.com/maps?v=2.0&key='+api_key			
		}
		basic_setting()
	</script>
	<script>	
		window.phoneback = function () {
			let menu = document.getElementById('menu');
			let myModal = document.getElementById('myModal');
			let search_result_div = document.getElementById('search_result_div')
			let hide_table_button = document.getElementById('hide_table_button')
			if(search_result_div.classList.contains('expanded')){
				document.getElementById('search_result_div').classList.remove('expanded'); 
				let item_div = document.getElementById('item_div');
				item_div.innerHTML = '';
				search_result_div.removeAttribute('key_word');
				if(placeSearch){
					placeSearch.clear();
				}
				return;
			}
			if(menu.classList.contains('expanded')){
				close_opening_menu(ui_menu_set);
				return;
			}
			if(myModal.style.display === 'flex'){
				modal_work(0);
				return;
			}
			if(open_menu_set.size>0){
				close_opening_menu(open_menu_set);
				return;
			}
			if(hide_table_button.dataset.state === '隐藏菜单'){
				handle_swipe_down()
				return;
			}			
			if(window.Android){
				window.Android.exitapp();
			}
		};
	</script>
	<script src = 'menu_touch.js'></script>		
</body>
</html>
